html - リスト内の要素を切り取った次の行に渡す方法は?

Question

私はリストを持っており、いくつかのcssを使用して、それらをボックス内の1行に並べ替えました。

<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番目のものが次の行に流れる原因になっています。