防止在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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将以下CSS添加到您的页面：

input
{
  white-space:nowrap;
  display:inline-block;
}

Answer 3

你可以使用，

white-space: nowrap;
word-break: keep-all;

防止自动换行。

e.g。

HTML

<div class="checkbox-wrapper">
    <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> 

CSS

.checkbox-wrapper {
    width:80px;
    height:200px;
    overflow:scroll;
    white-space: nowrap;
    word-break: keep-all;
}

Answer 4

  

我有一个简单的清单

所以使用正确的标记！

<ul>
<li><input type="checkbox" value="All">All</li>
...
</ul>

然后使用CSS设置样式：

ul { width: 80px; height: 200px; overflow: scroll; list-style-type: none;}
li { white-space: nowrap; }

最后一部分应该可以解决问题。

Answer 5

您可以通过两种方式解决此问题

1）增加div的宽度

2）使用文本溢出

＆＃13;

＆＃13;

[itemData,itemData , itemData , nil ,  nil , nil].

＆＃13;

div.testing {
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
body {
  padding : 50px;
}

＆＃13;

＆＃13;

＆＃13;