Как выровнять вторую строку в маркированном неупорядоченном списке - PullRequest
Новая
       14

Как выровнять вторую строку в маркированном неупорядоченном списке

2 голосов
/ 29 мая 2019

На моем сайте рецептов есть неупорядоченный список ингредиентов с маркировкой. У меня есть некоторые отступы вокруг списка, чтобы он отображался в центре страницы. Однако, когда я захожу, чтобы просмотреть страницу на iphone или планшете (устройство с более узким экраном), мои точки маркера переносятся на 2 строки, а вторая строка не соответствует первой.

Я полагаю, это из-за кода заполнения, который у меня есть в списке, поэтому на узком экране маркеры все еще находятся в центре страницы. Когда точка пули слишком длинная, чтобы пройти 2 строки, вторая строка сдвигается влево до тех пор, пока пуля все еще находится в центре. Я хочу выровнять вторую строку с первой (все еще в центре страницы)

Однако я попытался расположить его «за пределами» маркера, потому что я сделал свой собственный пункт с кодом, который, похоже, не работает.

Приведенный ниже код является кодом, который я имею для отображения этой проблемы на сотовом устройстве. 

    @media only screen and (max-width : 480px)
    { ul[data-rte-list] li>*:first-child::before  {
        content: "•";
        position: outside;
        line-height: 1.5em !important;
        top: 2px;
        padding-right: 10px;
        font-size: 22px;
        padding-left: 100px;
        color: #373737;
        opacity: .4;
    }

}

Именно так выглядит страница:

how the page looks

Ответы [ 3 ]

1 голос
/ 29 мая 2019

Вы применяете заполнение к селектору :: before каждого элемента <li>. Удалите его оттуда и добавьте к элементу <ul>. 

@media only screen and (max-width : 480px)
{ 
    ul[data-rte-list] {
        padding-left: 100px;
    }

    ul[data-rte-list] li>*:first-child::before  {
        content: "•";
        position: outside;
        line-height: 1.5em !important;
        top: 2px;
        padding-right: 10px;
        font-size: 22px;
        color: #373737;
        opacity: .4;
   }
}
0 голосов
/ 29 мая 2019

Опираясь на ответ uom-pregorio, вы можете сделать элемент списка контейнером flexbox, чтобы весь текст был действительно выровнен с первой строкой.

Я также переместил элемент ::before sudo в сам <li>, чтобы он не содержался внутри <span>, поскольку мы хотим, чтобы они сидели рядом друг с другом как братья и сестры. 

div {
  width: 400px;
  margin: auto;
  background-color: #dadada;
}

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

ul li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

ul li::before {
  content: "•";
  line-height: 1.5em !important;
  padding-right: 10px;
  font-size: 22px;
  color: #373737;
  opacity: 0.4;
  width: content;
  margin: 0;
}

ul li>*:first-child {
  flex-grow:2;
  padding-top: 0.5em;
}
<div>
  <ul>
    <li>
      <span>1 can coconut milk</span>
    </li>
    <li>
      <span>1/4 cup date syrup (substitute maple syrup or honey)</span>
    </li>
    <li>
      <span>1 tsp vanilla</span>
    </li>
  </ul>
</div>

См. Этот сайт для получения дополнительной информации: Полное руководство по Flexbox

0 голосов
/ 29 мая 2019

Это просто дикая попытка, но, как я вижу, вы применяете padding к дочерним элементам вашего li. Вы должны применить его к элементу ul, чтобы заполнить весь список. 

div {
  width: 400px;
  margin: auto;
  background-color: #dadada;
}

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


ul li > *:first-child::before {
  content: "•";
  position: outside;
  line-height: 1.5em !important;
  top: 2px;
  padding-right: 10px;
  font-size: 22px;
  color: #373737;
  opacity: 0.4;
}
<div>
<ul>
  <li>
    <span>1 can coconut milk</span>
  </li>
  <li>
    <span>1/4 cup date syrup (substitute maple syrup or honey)</span>
  </li>
  <li>
    <span>1 tsp vanilla</span>
  </li>
</ul>
</div>
...