Вложенный список с выровненными по левому краю «пулями» - PullRequest
Новая
       3

Вложенный список с выровненными по левому краю «пулями»

1 голос
/ 24 марта 2011

У меня есть требование для отображения иерархии проектов.Очевидное решение - это ряд вложенных неупорядоченных списков.Однако проблема, которую мне нужно преодолеть, заключается в том, что значение узла должно быть выровнено по всему дереву с отступом имени проекта, как и ожидалось в дереве.Вот пример 

  Project Root Node
1    Task 1
1.1     Travel
1.2     Do Work
2    Task 2
2.1     Perform Testing
2.1.1      UI Testing
2.1.2      Connection Testing

Разметка довольно проста ... 

<ul>
   <li><span></span>Project Root Node
      <ul>
         <li><span>1</span>Task 1
            <ul>
               <li><span>1.1</span>Travel</li>
               <li><span>1.2</span>Do Work</li>
            </ul>
         </li>
         ...and so on...

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

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

Другое решение, которое у меня было, заключалось в том, чтобы включить "level number "класс при рендеринге элемента li вместе с соответствующим стилем, который устанавливает inline-block и width.Моя проблема заключается в том, что я определил достаточно уровней, чтобы охватить любую глубину дерева.

Ответы [ 3 ]

1 голос
/ 24 марта 2011

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

CSS 

ol {
  counter-reset: item; 
  padding: 0; 
  margin: 0;
  margin-left: 20px !ie7;
}
ul {margin: 0; padding: 0; list-style: none;}
li {
  display: block;
}
ol li:before {
  display: inline-block; 
  content: counters(item, ".") " "; 
  counter-increment: item;
  width: 50px;
}
ol li li:before {width: 70px;}
ol li li li:before {width: 90px;}
ol li li li li:before {width: 110px;}

иHTML: 

<ul>
   <li>Project Root Node
   <ol>
   <li>Task 1
      <ol>
      <li>Travel (1.1)
        <ol>
        <li>Travel (1.1.1)</li>
        <li>Do Work (1.1.2)</li>
        </ol>
      </li>
      <li>Do Work (1.2)</li>
      </ol>
    </li>
    <li>Task 2
      <ol>
      <li>Travel (2.1)</li>
      <li>Do Work (2.2)</li>
      </ol>
    </li>
       <li>Task 3
      <ol>
      <li>Travel (3.1)</li>
      <li>Do Work (3.2)</li>
      </ol>
    </li>
  </ol>
</li>   
</ul>

отрегулируйте ширину элементов :before psuedo, чтобы создать текст с отступом

обновлено , чтобы сделать узел проекта не пронумерованным и включить IE7 remargin

ОБНОВЛЕНИЕ

ссылка на JSFiddle, содержащая выборку кода с использованием dl s (списки определений) вместо этого с учетом необходимости поддержки IE7

JSFiddle с использованием DL

1 голос
/ 24 марта 2011

Это может быть немного "хакерски", но я бы использовал вложенные неупорядоченные списки, как они есть, и поместил в них диапазоны с такими классами, как list-level-1, list-level-2 и так на. Для браузеров с отключенным JavaScript он будет отображаться как обычный вложенный список. Используя jQuery или другую библиотеку JavaScript, преобразуйте списки в серии <div> s (с двумя классами, такими как list-item-number и list-item-level-1, list-item-level-2). Установите для полей поле left-left соответствующей ширины. 

<div class="row"><div class="list-item-number">1</div><div class="list-item-level-1">Fruits</div></div>
<div class="row"><div class="list-item-number">1.1</div><div class="list-item-level-2">Apples</div>
<div class="row"><div class="list-item-number">1.1.1</div><div class="list-item-level-3">Red Delicious</div>
<div class="row"><div class="list-item-number">1.1.2</div><div class="list-item-level-3">Fuji</div>

Вы могли бы даже использовать таблицу для аналогичного эффекта (и, на мой взгляд, превосходящего семантического значения), но мне не повезло с таблицами и jQuery.

Для чистого решения HTML / CSS лучшим вариантом будет использование таблицы. Помните, что таблицы не являются плохими по своей природе - они просто плохи для макета .

0 голосов
/ 24 марта 2011

Чтобы все было правильно выровнено, я бы вынул пролеты из нормального потока, плавая их и дав им отрицательное поле.Это заставит их не влиять на расположение текста, если они фактически не сталкиваются с ним.Вам понадобится правило для каждого уровня списка, но это только отчасти присуще вложенным спискам в CSS *. 

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  margin-left:1em;
  padding-left: 0;
}

li li span {
  display: block;
  float: left;
  margin-left: -2em;
}

li li li span { margin-left: -3em; }

Я только что протестировал его в ужасно сломанном IE 5 для Mac, и оно сработалоотлично, поэтому я предполагаю, что более новые версии должны быть в порядке, в отличие от решений, использующих псевдоэлементы и сгенерированный контент (которые превосходят стилистику, но ломаются в Explorer <8).генерируется - быстрая однострочность Ruby будет <code>(2..10).each {|n| puts("#{'li '*n}span {margin-left: -#{n}em}")}, с заменой 10 на количество уровней

...