Выровнять маркеры в неупорядоченном списке с левым полем заголовка выше? - PullRequest
Новая
       10

Выровнять маркеры в неупорядоченном списке с левым полем заголовка выше?

0 голосов
/ 04 мая 2020

Как можно выровнять маркеры по левому полю текста над списком? Например: 

<html>
    <style>
        ul.p1 {padding-left: 40px}
        ul.p2 {padding-left: 0px}
    </style>
<body>    
<h2>List A</h2>
<ul class="p1">
    <li>
        <p>
            Item 1.1
        </p>
        <p>
            Item 1.2
        </p>
    </li>
</ul>
<h2>List B</h2>
<ul class="p2">
    <li>
        <p>
            Item 2.1
        </p>
        <p>
            Item 2.2
        </p>
    </li>
</ul>
</body>
</html>

Это дает следующий вывод в Google Chrome:

enter image description here

Обратите внимание, что пули в списке B исчезли. Я бы хотел, чтобы маркеры были точно расположены (выровнены) над буквой «L» в элементе <h2> над списком. Можно ли это сделать без использования метода проб и ошибок?

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Просто удалите поля / отступы по мере необходимости и используйте list-position:inside. 

ul {
  list-style-position: inside;
  padding: 0;
}

p {
  display: inline-block;
  margin: 0;
}
<h2>List A</h2>
<ul class="p1">
  <li>
    <p>
      Item 1.1
    </p>
  </li>
  <li>
    <p>
      Item 1.2
    </p>
  </li>
</ul>
<h2>List B</h2>
<ul class="p2">
  <li>
    <p>
      Item 2.1
    </p>
  </li>
  <li>
    <p>
      Item 2.2
    </p>
  </li>
</ul>

альтернативно, оберните абзацы в div 

body {
  margin: 1em;
}

ul {
  list-style-position: inside;
  padding: 0;
}

div {
  display: inline-block;
  vertical-align: top;
}

p {
  margin: 0;
}
<h2>List B</h2>
<ul class="p2">
  <li>
    <div>
      <p>
        Item 2.1
      </p>
      <p>
        Item 2.2
      </p>
    </div>
  </li>
</ul>
1 голос
/ 04 мая 2020

Создайте свой собственный стиль списка, используя псевдоэлемент, и вы можете легко контролировать то, что вы хотите: 

ul {
  padding-left: 0px;
  list-style: none;
}

li {
  padding-left: 1em;
  position: relative;
}

li:before {
  content: "•";
  position: absolute;
  left: 0;
  font-size: 1.5em;
  line-height: 0.9em;
}

/* to illustrate */
body {
  border-left:1px solid grey;
}
<h2>List A</h2>
<ul >
  <li>
    <p>
      Item 1.1
    </p>
    <p>
      Item 1.2
    </p>
  </li>
</ul>
<ul style="font-size:30px;">
  <li>
    <p>
      Item 1.1
    </p>
    <p>
      Item 1.2
    </p>
  </li>
</ul>
0 голосов
/ 04 мая 2020

Вы можете попробовать следующие модификации: 

<html>
    <style>
        ul.p1 {padding-left: 20px}
        ul.p2 {padding-left: 20px}
    </style>
<body>  

<h2>List A</h2>
<ul class="p1">
    <li>Item 1.1</li>
    <li>Item 1.2</li>
</ul>

<h2>List B</h2>
<ul class="p2">
    <li>Item 2.1</li>
    <li>Item 2.2</li>
</ul>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...