Блог

Главная - Вопросы по программированию - Как нарисовать линию для элемента списка из начала контейнера div?

Как нарисовать линию для элемента списка из начала контейнера div?

#javascript #html #angularjs #css

#javascript #HTML #angularjs #css

Вопрос:

Живой пример http://jsfiddle.net/vro0om/yhvnh /

Я пытаюсь нарисовать линию, разделяющую 2 элемента li во вложенных ul. Но строка принимает ширину контейнера ul, а не div, содержащую полную структуру. В упомянутом примере я использовал вложенный ul, но в моей работе используется ng-repeat для получения того же эффекта.

 .unstyled {

    padding-left: 24px;

}
.titleSeperator
 {
   background: black ;
   margin-top: 0px;
   margin-bottom: 0px;
   height : 1px;
   width:100%;
 }

Комментарии:

1. Вот так: jsfiddle.net/yhvnh/1 ?

2. @dfsq нет, не справа, а касаясь левого края div

Ответ №1:

Я думаю, что есть более простой способ сделать то, что вы хотите.

Сначала удалите все ваши .titleSeperator divs. Затем используйте следующий CSS-код для родительского элемента ul :

 ul.lines {
    line-height: 1.4em;
    background: linear-gradient(white 95%, black 5%);
    background-size: 100% 1.4em;
    background-origin: content-box;
}

Новая скрипка: http://jsfiddle.net/yhvnh/2 /

Некоторые пояснения к CSS:

  • line-gradient позволяет создавать градиент, начиная с 95% белого и заканчивая 5% черного
  • background-size определите размер градиента: ширина 100% и высота 1,4em (должно быть таким же, как line-height )
  • background-origin указывает, относительно чего должно быть свойство background-position

Комментарии:

1. Привет, я использую обозначение px, и оно не соответствует ему, форматирование нарушается

2. Вам просто нужно заменить 1.4em на 16px, например.

Ответ №2:

Вы можете установить position: relative; overflow: hidden; на самый верхний ul и сделать разделители абсолютно расположенными

 .titleSeperator {
    background: black;
    height : 1px;
    width: 10000px;
    position: absolute;
    left: 0;
}

Демо-версия: http://jsfiddle.net/yhvnh/3 /

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

Вариант 2

Вы также можете использовать :before псевдоэлемент вместо избыточных .titleSeparator divs

 .unstyled > li:before {
    content:'';
    background: black;
    height : 1px;
    width: 10000px;
    position: absolute;
    left: 0;
}

Демо-версия: http://jsfiddle.net/yhvnh/4 /