HTML Div Ширина с переполнением: Авто? - PullRequest
Новая
       43

HTML Div Ширина с переполнением: Авто?

2 голосов
/ 02 июля 2011

Я создаю div, как показано ниже:

Редактировать: Вот пример: 

<html>
  <body>
    <table>
      <tr>
        <td>
          <div style="position: relative; overflow: auto; max-height: 15em;">
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
            <label><input type="checkbox"/>Hello! Hello!</label><br/>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

Текст каждого ярлыка без необходимости переносит на следующую строку.

Как мне это исправить?

Ответы [ 3 ]

6 голосов
/ 02 июля 2011

Попытка 1

Добавить к div, 

white-space: nowrap;

Проблема с этим заключалась в том, что вертикальная полоса прокрутки, которая, по-видимому, мешает содержанию, слегка вводя небольшую ненужную горизонтальную полосу прокрутки.

Попытка 2

Добавить к div, 

white-space: nowrap;
padding-right: 1.5em;   // increase as appropriate

Проблема в том, что вы угадываете размер вертикальной полосы прокрутки, чтобы убрать горизонтальную.

Попытка 3

Добавить к div, 

white-space: nowrap;
overflow-x: hidden; 
overflow-y: scroll;

Теперь горизонтальная полоса прокрутки удалена, а размер вертикальной полосы прокрутки не угадывается, , но она всегда видна.

Попытка 4

Проблема, похоже, сводится к необходимости зарезервировать место для полосы прокрутки, как это делает overflow-y: scroll;, но она не всегда видна. Первым решением, которое пришло на ум, было добавление дополнительного div наряду с первым, у которого было установлено overflow-y: scroll; и width: 100%;. Проблема была в том, что с обычной div полоса прокрутки включена в ширину. Однако после некоторых проб и ошибок кажется, что если вы используете float, это не так. Таким образом, используя дополнительный float, вы можете принудительно увеличить ширину контейнера на ширину полосы прокрутки, а затем, установив width: 100%; в исходном div, он также займет дополнительное место. Вы скрываете дополнительный поплавок, устанавливая его высоту 0.

N.B. Я не совсем уверен, почему это работает сам, и я тестировал только на Firefox5, где он, кажется, работает. Я надеюсь, что это полезно для вас. Таким образом,

Добавить 

<div class="hack"></div>

ниже вашего оригинала div. Тогда, 

.content {
    float: left;
    width: 100%;
    overflow-y: auto;
    max-height: 15em;
}

.hack {
    float: left;
    width: 100%;
    overflow-y: scroll;   
    height: 0;
}

Правка вашего jsfiddle, включая это исправление, здесь .

1 голос
/ 02 июля 2011

Вы можете использовать вертикальную полосу прокрутки с помощью overflow-y: scroll;.

Edit:

Ладно, наконец я думаю, что понятно, чего ты хочешь.

См. Эту демонстрационную скрипку .

CSS: 

div {
    overflow: auto;
    max-height: 15em;
    display: inline-block;
}

HTML: 

<div>
    <input type="checkbox" id="check" />
    <label for="check">Some text.</label>
</div>

Редактировать 2:

Хорошо, может быть это то, что вы хотите ? Надеюсь, вы не возражаете против дополнительных отступов, если в div всего несколько строк.

0 голосов
/ 02 июля 2011

Из того, что я вижу, вам нужна только вертикальная полоса прокрутки. Это должно сработать. 

overflow-x: hidden;
...