HTML + CSS: сделать положение относительно какого-либо другого элемента? - PullRequest
Новая
       8

HTML + CSS: сделать положение относительно какого-либо другого элемента?

1 голос
/ 17 ноября 2011

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

Эффект, который я пытаюсь достичь, ниже, где farLeft - метки на каждый ли (см. аналог HTML ниже):

Tree

Я легко могу сделать это, но мой CSS будет нечистым, если не сказать больше, чем-то вдоль линий: 

/* each indentaion level is 20 px to teh right, so I need to offset */
ol.topLevel li label.farLeft { position absolute; left=-218px; ...}
ol.topLevel li ol li label.farLeft { position absolute; left=-238px; ...}
ol.topLevel li ol li ol li label.farLeft { position absolute; left=-258px; ...}

Использование может быть таким, как показано ниже, но с большим количеством уровней вложенности: 

<ol class="topLevel">
  <li>
     <label>Some niceLabel</label>
     <label class="farLeft">Far left text</label>
  </li>
  <ol>
     <li>
        <label>Some niceLabel</label>
        <label class="farLeft">Far left text</label>
      </li>
  </ol>  
</ol>

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

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

Возможно, пришло время упомянуть, что я новичок в CSS, так что я мог бы легко пропустил что-то совершенно очевидное.

Ответы [ 3 ]

2 голосов
/ 17 ноября 2011

Вот его скриптовая ссылка

http://jsfiddle.net/5YKFa/6/

css 

ol.topLevel{
    padding-left: 100px;
}
li{
    padding-left: 20px;
}
.left {
    position: absolute; left:0px;
}

html 

<ol class="topLevel">
  <label>Top Level</label>
  <li>
     <label class="left">Label</label>
     <label>1</label>
  <ol>
     <li>
       <label class="left">Label</label>
       <label>1.1</label>
     </li>
     <li>
       <label class="left">Label</label>
       <label>1.2</label>
     </li>
  </ol>  
  </li>
</ol>
2 голосов
/ 17 ноября 2011

Используется ли класс farLeft где-либо еще на странице?Если нет, простое решение будет следующим: 

.farLeft { position: absolute; left:0px; ...}

Абсолютное позиционирование должно автоматически совпадать с родительским контейнером в 0px.Поэтому, если вы оберните вокруг него относительно позиционированный div, вы сможете настроить поля и все, чтобы получить результат, который вы ищете.

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

1 голос
/ 17 ноября 2011

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

...