Предотвращение обертывания элементов внутри div

Question

У меня есть простой список флажков внутри div. Я хотел бы предоставить div фиксированной ширине, но я не хочу, чтобы метки этих флажков опускались на одну строку. Я также хочу сохранить полосы прокрутки, чтобы пользователь мог видеть скрытые части, если захочет. Некоторые говорят, что 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> 

Вопрос в том, как я могу дать Див фиксированную ширину, но я не хочу, ярлыки этих флажков идти вниз на 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; 

Чтобы предотвратить перенос слов.

например.

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

Вы можете решить эту проблему двумя способами

1) увеличивают ширину 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>