Выровнять элементы перед деревом в ul / li - PullRequest
Новая
       0

Выровнять элементы перед деревом в ul / li

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

У меня есть этот образец кода: 

<ul>
    <li>group 1
    <ul>
    <li>group 1.1</li>
    <li> group 1.2</li>
    <li>group 1.3
    <ul> 
    <li>group 1.3.1</li>
    <li> group 1.3.2</li>
 </ul>
</li>
</ul>
</li>
    <li>group 2</li>
    <li>group 3</li> 
</ul>

Я хочу добавить несколько форматированных чисел перед этим древовидным представлением, выровненным по вертикали слева, так что вывод будет примерно таким: 


     10  группа 1  20  группа 1.1  15  группа 1.2  07  группа 1.3  100  группа 1.3.1  08  группа 1.3.2      90  группа 2  110  группа 3

Я попытался добавить слева и выровнять числа в них, но это не сработало.

Есть предложения?

Спасибо

Ответы [ 2 ]

2 голосов
/ 07 мая 2020

Вот решение с использованием CSS. Дайте мне знать, если это вам поможет. 

.top-level-list {
  position: relative;
  padding-left: 80px;
}

li>span:first-child {
  position: absolute;
  left: 0px;
}
<html>
    <body>
        <ul class="top-level-list">
          <li><span>1000.</span>group 1</li>
          <ul>
            <li><span>20.</span>group 1.1</li>
            <li><span>15.</span>group 1.2</li>
            <li><span>07.</span>group 1.2</li>
            <li><span>102220.</span>group 1.3</li>
            <ul> 
              <li><span>083113.</span>group 1.3.1</li>
              <li><span>17.</span>group 1.3.2</li>
            </ul>
          </ul>
          <li><span>90189.</span>group 2</li>
          <li><span>110.</span>group 3</li>
      </ul>
    </body>
  </hmtl>
0 голосов
/ 07 мая 2020

ваш код выглядит как ваш пример вывода ... в чем ваша проблема? внешний вид точек? - это делается в css. 

li {
liststyle: disc, circle,......;
}

заранее извините за недоразумение.

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

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

...