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>

Answer 2

は、あなたのページに次のCSSを追加します。

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

Answer 3

を私は単純なリスト

を持っているので、適切なマークアップを使用します！

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

、

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

をワードラップを防ぐために。

次の2つの方法

1でこの問題を解決することができ

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 5

）のdiv

2の幅を増やす）、テキストオーバーフローを使用

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

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