Как сделать так, чтобы точки у элементов li выравнивались по блоку?

Question

Как сделать, чтобы точки выравнивались по блоку?

Элементы сделаны через li

<ul class="intro__list">
    <li class="intro__item"><span>Without ads and other</span></li>
    <li class="intro__item"><span>20+ servers for stable connection</span></li>
    <li class="intro__item"><span>Confidential geolocation and data</span></li>
</ul>

Answer 1

как вариант

span {
  margin-left: 40px;
  padding: 0;
}

ul {
  margin-left: 10px;
  /* Отступ слева */
}

<div class="box">
  <span>asdasd</span>
  <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
  </ul>
</div>

Answer 2

Эти точки не являются частью контента, они существуют как псевдоэлементы ::marker и отображаются слева от блока элемента списка. Изменить это, кажется, никак нельзя. Можно пытаться подогнать padding ul выравнивая точки, но это тухлая идея -- никакой гарантии, что точки не поедут в другом браузере, с другими стилями по умолчанию.

Можно схитрить и скрыть стандартные точки, и добавить свои собственные через ::before. Возможностей по управлению ::before гораздо больше и можно добиться корректного результата. Например так:

div {
  background-color: #7db;
  margin: 1em;
}
ul {
  list-style: none;
  padding: 0;
}
li::before {
  content: "•";
  float: left;
  padding: 0 0.5em 0 0;
}
span {
  display: block;
  overflow: hidden;
}

<div>
  text text text
  <ul>
    <li><span>foo</span></li>
    <li><span>bar<br>bar2</span></li>
  </ul>
</div>

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

БЛОГ НА HUSL

Как сделать так, чтобы точки у элементов li выравнивались по блоку?

Ответы (2 шт):