html - 如何传递到切割列表中元素的下一行？

Question

我有列表，并使用一些 css 将它们分类到一个框中的一行中。

<div class="box">  
<ul>
   <li>
       <a href="http://www.google.com">Example Link Sample</a>
   </li>
</ul>
</div>

CSS：

.box {width:500px; margin:auto;}

li {display:inline;}

但是一些位于行尾的列表元素被截断。如果他们切断了，我怎么能强迫他们去另一条线。

这是示例：http: //jsfiddle.net/P5D8u/

截图： http: //prntscr.com/m0i88

Answer 1

添加这个：

li {
  white-space: nowrap;
}

display:inline;在您的li元素上导致第三个流到下一行。