html - 防止在 div 内包装元素

Question

我在一个 div 中有一个简单的复选框列表。我想给 div 一个固定的宽度，但我不希望这些复选框的标签下降 1 行。我还想保留滚动条，以便用户可以根据需要查看隐藏的部分。有人说使用 float:left; 或 overflow:hidden; 但这似乎不起作用。我一直在获取带有标签的列表，而不是被隐藏。我以为 overflow:hidden; 会解决这个问题，但它却扩展了我的 div 的宽度以显示其余标签。

<div style='width:80;height:200;overflow:scroll;'>
<input type='checkbox' value='All'>All<br>
<input type='checkbox' value='San Francisco'>San Francisco<br>
<input type='checkbox' value='North Carolina'>North Carolina<br>
<input type='checkbox' value='New York'>New York<br>
</div>

问题是如何给 div 一个固定的宽度，但我不希望这些复选框的标签向下移动 1 行，我想保留滚动条？

Answer 1

不确定这是否是您想要的，但请尝试:

#list{
  width:80px;
  height:200px;
  overflow-y:scroll;
  white-space:nowrap;
}

<div id="list">
  <input type='checkbox' value='All'>All
  <br>
  <input type='checkbox' value='San Francisco'>San Francisco
  <br>
  <input type='checkbox' value='North Carolina'>North Carolina
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
</div>