HTML / CSS вложенная левая граница: повторяющийся визуальный эффект - PullRequest
Новая
       13

HTML / CSS вложенная левая граница: повторяющийся визуальный эффект

0 голосов
/ 24 августа 2018

Я после этого вложенного border-left эффекта на списки HTML. Обратите внимание, что с каждым вложенным уровнем списка левая граница затрагивает один шаг:

enter image description here

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

enter image description here

Вот минимальный пример для игры: 

<ul style="list-style-type:none">
  <li>RPG
    <ul style="list-style-type:none">
      <li>DA</li>
      <li>Bioshock</li>
    </ul>
  </li>
  <li>MOBA
    <ul style="list-style-type:none">
      <li>DOTA</li>
      <li>LoL</li>
    </ul>
  </li>
</ul>

Подскажите, пожалуйста, как реализовать эффект вложенного левого поля в HTML / CSS? Редактировать: это должно работать для бесконечного количества открытых уровней вложенности.

1 Ответ

0 голосов
/ 24 августа 2018

Вы можете использовать стиль border-left для достижения желаемого.

РЕДАКТИРОВАТЬ - Чтобы ответить на вопрос ОП в комментариях

1) Чтобы получить вложенные списки бесконечности с границами

Добавить вышеупомянутый стиль в ul, который будет нацелен на родительский и все дочерние элементы ul.соответственно, чтобы задать border-left. 

ul {
    border-left: 20px solid #000;
}

При добавлении border-left к родительскому элементу увеличивается граница и для дочернего элемента.Это должно быть хорошо , если у вас нет изменяющихся границ.

2) Чтобы получить пользовательские границы для списков -

По сути, я удалил все отступы для списков, например ul, а затем добавил 20px border-left к parent list и еще 20px border-left к child list.

Для grand-child ul процедура такая же, если вы дадите этому ul имя класса -> grand-child, css будет выглядеть так - 

ul.grandchild li {
    border-left: 30px solid #000;
}

Рабочий фрагмент с parent и child ul выглядит следующим образом - 

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


/*
for different border sizes

ul.parent li {
  border-left: 20px solid #000; 
}

ul.child li {
  border-left: 20px solid #000;
}
*/

/* for all ul's with same radius, don't need any specific class */
ul {
  border-left: 20px solid #000;
}
<ul class="parent">
  <li>RPG
    <ul class="child">
      <li>DA</li>
      <li>Bioshock</li>
      <li>
        <ul>
          <li>DA</li>
          <li>Bioshock</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>MOBA
    <ul class="child">
      <li>DOTA</li>
      <li>LoL</li>
    </ul>
  </li>
</ul>

PS Добавление border-left к родительскому элементу увеличивает границу для дочернего элемента, которую вы все равно должны были понять.

...