Question

我需要在SPAN（http://jsfiddle.net/Shg9L/8/）的右侧拥有UL。

当宽度不够时，我希望UL保持在SPAN的右侧，但LI项目开始堆叠......

问题在于，当我调整窗口大小时，UL会进入SPAN。

HTML

<div>
  <span>Categories</span>
  <ul>
    <li><a href="#">Book</a></li>
    <li><a href="#">Computer</a></li>
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Toy</a></li>
    <li><a href="#">Music</a></li>
    <li><a href="#">Audio</a></li>
    <li><a href="#">Game</a></li>
  </ul>
</div>

CSS

div {.clear;}

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

div ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  .clear;    
}

div ul li {
  background-color: #F0F0F0;      
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 8px;  
}

.clear:after {
  content: "";
  display: table;
  clear: both;
}

有谁知道如何解决这个问题？

谢谢你，米格尔

Answer 1

Fiddle

删除float:left;

中的div ul

Answer 2

您可以使用div {white-space:nowrap;}确保它不会破坏div的内容。 ul有display:inline-block;而不是float: left;。向左浮动使其向左移动，留下文本流，并且内联块仍将其保留在文本流中，而不占用新行。

demo

将UL放在SPAN右侧

2 个答案: