Question

我有一个UL，在div中我设置了DIV，UL和LI的宽度。如果有的话我想要溢出滚动，所以我将溢出设置为auto。但是，当它太宽时，我似乎无法阻止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中的溢出属性似乎没有做任何事情。当我把它放在div上时，无论是否需要，我都会获得水平滚动。任何帮助将不胜感激。

Answer 1

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

white-space: nowrap会阻止孩子（li）进入新的一行。

<强> Live demo here (click).

防止<li>跨越行</li>

1 个答案: