html - 防止 跨行

Question

我有一个 UL，在一个 div 中，我在其中设置了 DIV、UL 和 LI 的宽度。如果有的话，我想让溢出滚动，所以我将溢出设置为自动。但是，当 LI 太宽时，我似乎无法阻止 LI 跨线。这是我正在使用的 CSS:

/* id of the containing div */
#ul-container {
    width: 325px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: #4297d7;
    overflow: auto;
}

           /* this is the id if the ul*/
#selectable {
    width: 300px;
    height: 75px;
}

#selectable .ui-selecting {
    background: #ccc;
}

#selectable .ui-selected {
    background: #4297d7;
}

li {
    list-style: none;
    overflow: auto;
    width: 300px;
    margin-left: -25px;
}

li 中的 overflow 属性似乎没有做任何事情。当我把它放在 div 上时，无论我是否需要它，我都会得到水平滚动条。任何帮助将不胜感激。

Answer 1

#ul-container{
  white-space: nowrap;
}

white-space: nowrap 将阻止 child (li 的)换行。

Live demo here (click).