我正在尝试在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”,但没有它我无法使其发挥作用。
这可以解决吗?
答案 0 :(得分:3)
将无序列表显示为块并隐藏溢出。然后它将占用所有可用的宽度。当没有足够的空间时,列表项将与无序列表的边缘整齐地堆叠:
div ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
overflow:hidden;
}
据我所知,您的容器white-space:nowrap
上的<div>
不需要。你可以删除它。
答案 1 :(得分:0)
删除了一些东西并添加了位置:绝对;和内联:显示块到某些元素
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;
}