CSS - 使浮動框停留在「同一行」

考慮下面的代碼片段：CSS - 使浮動框停留在「同一行」

<html> 
    <head> 
     <style type="text/css"> 
     #container { 
      width: 400px; 
      height: 600px; 
      background-color: lightgrey; 
     } 

     .item { 
      width: 50px; 
      overflow: hidden; 
      white-space: nowrap; 
      float: left; 
      border: 1px solid red; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div class="item">ITEM 1</div> 
      <div class="item">ITEM 2</div> 
      <div class="item">ITEM 3</div> 
      <div class="item">ITEM 4</div> 
      <div class="item">ITEM 5</div> 
      <div class="item">ITEM 6</div> 
      <div class="item">ITEM 7</div> 
      <div class="item">ITEM 8</div> 
      <div class="item">ITEM 9</div> 
      <div class="item">ITEM 10</div> 
      <div class="item">ITEM 11</div> 
      <div class="item">ITEM 12</div> 
      <div class="item">ITEM 13</div> 
      <div class="item">ITEM 14</div> 
      <div class="item">ITEM 15</div> 
      <div class="item">ITEM 16</div> 
     </div> 
    </body> 
</html>

它給了我下面的結果：

enter image description here