UL не остаются внутри их содержащих DIV?

У меня действительно простая настройка

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</div>

Я предположил, что все содержимое и пули ul будут находиться в div, но в настоящее время это не так.

Пункты пули для UL появляются за пределами div и эффективно исчезают при скрытии переполнения.

Для меня это несколько сломанно и совместимо с браузером, и я просмотрел спецификацию HTML, но не смог найти ничего, говоря, что это должно произойти.

Есть ли исправление CSS для него или возможное исправление макета?

Спасибо заранее.

Ответы

Ответ 1

Вы хотите использовать list-style-position:

ul {
   list-style-position: inside;
}

Ответ 2

Обычно вы теряете украшения списка при переполнении div, когда ваши UL/OL и LI не имеют достаточного количества дополнений, или вы плавающие элементы или отображаете: inline.

Попробуйте добавить некоторые элементы/поля в элементы списка (элемент LI).

Ответ 3

Планируете ли вы элементы списка слева или справа? Если это так, то следующая проблема решит вашу проблему.

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <div style="clear:both;"></div>
</div>

Ответ 4

Такие проблемы обычно можно исправить с помощью хорошего reset.css и переписать всю информацию, такую ​​как list- стиль и т.д.

Ответ 5

list-style-position: inside прекрасно работает, если вашим точкам маркера не понадобится несколько строк на маленьких экранах, поскольку ваш текст будет совмещен с точкой маркера, а не с того места, где начинается текст.

Example of badly aligned bullet points

Сохранение стандартного text-align: outside, допускающего небольшое поле и выравнивание текста по левому краю для переопределения любых центрированных контейнеров, позволяет обойти проблему с выравниванием точки маркера.

ul, ol {
  margin-left: 0.75em;
  text-align: left;
}