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

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导致第3个元素流向下一行。