UL не остаются в пределах их содержащих DIVs?

Question

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

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

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

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

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

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

Заранее спасибо.

Answer 1

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

ul {
   list-style-position: inside;
}

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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