Невозможно выровнять текст по неупорядоченному списку, если в него включен якорь - PullRequest
Новая
       47

Невозможно выровнять текст по неупорядоченному списку, если в него включен якорь

0 голосов
/ 07 февраля 2019

Я пытаюсь создать неупорядоченный список с определенным цветом маркера, который выравнивается как традиционный маркированный список, когда якорь включен.Я создал неупорядоченный список с правильным выравниванием, используя следующий код: 

ul li.purchase::before {
  list-style: none;
  content: "\2022";
  color: yellow;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 1em;
  padding: 0px;
}
<ul>
  <li class="purchase">Originals</li>
  <li class="purchase">Prints</li>
  <li class="purchase">Apparel</li>
  <li class="purchase">Other Merchandize</li>
</ul>

Этот код работает отлично, но когда я добавляю привязку к коду HTML: 

ul li.purchase::before {
  list-style: none;
  content: "\2022";
  color: yellow;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 1em;
  padding: 0px;
}
<ul>
  <li class="purchase"><a href="#">Originals</a></li>
  <li class="purchase"><a href="#">Prints</a></li>
  <li class="purchase"><a href="#">Apparel</a></li>
  <li class="purchase"><a href="#">Other Merchandize</a></li>
</ul>

Текст смещается вниз и больше не выравнивается по маркеру.Я предполагаю, что проблема заключается в том, что якорь создает блок, но я не смог решить проблему, добавив селектор класса в якорь и изменив отображение на inline-block.Я все еще учусь кодировать и надеюсь, что вы поможете мне с решением.

1 Ответ

0 голосов
/ 07 февраля 2019

Эта проблема может быть легко решена путем присвоения свойству «vertical-align» тега привязки в вашем li.Вертикальное выравнивание имеет несколько значений.Вы можете попробовать в инспекторе вашего браузера, какое значение вам подходит.Например: «вертикальное выравнивание: среднее;».

...