白色空间:nowrap使元素位于窗口之外

时间:2014-02-13 15:48:22

标签: html css

我正在尝试在SPAN(http://jsfiddle.net/Shg9L/24/)的右侧拥有UL。

<div>
  <span>Categories</span>
  <ul>
    <li><a href="#">Book</a></li>
    <li><a href="#">Computer</a></li>
  </ul>
</div>

当窗口调整大小时,LI应该堆叠但不在SPAN下。

问题是当我调整窗口大小时,右边的一些LI项会变得隐藏。

我认为这是因为“white-space:nowrap”,但没有它我无法使其发挥作用。

这可以解决吗?

2 个答案:

答案 0 :(得分:3)

将无序列表显示为块并隐藏溢出。然后它将占用所有可用的宽度。当没有足够的空间时,列表项将与无序列表的边缘整齐地堆叠:

div ul {
    list-style: none;   
    padding: 0;
    margin: 0;
    display: block;
    overflow:hidden;
}

据我所知,您的容器white-space:nowrap上的<div>不需要。你可以删除它。

JSFiddle

答案 1 :(得分:0)

http://jsfiddle.net/Shg9L/29/

删除了一些东西并添加了位置:绝对;和内联:显示块到某些元素

div {background-color:orange;}

div span {
    background-color: #E0E0E0;      
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 8px;  
}

div ul {
    position:absolute;
    top:0px;left:100px;
    list-style: none;   
    padding: 0;
    margin: 0;
    display: inline-block;
}
div ul li {
    background-color: #F0F0F0;      
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 8px;  
    display:inline-block;
}