Смещение горизонтальной границы

Пожалуйста, обратитесь к следующему макету здесь. Я пытаюсь заставить горизонтальные границы начинать с правого края левых границ (т.е. Не пересекаться).

Примерно так:

CSS

ul{
 list-style: none;
}
li:first-of-type{
 border-top: solid 1pt #cccccc;
}

li{
 padding:10px;
 border-bottom: solid 1pt #cccccc;
 border-left: solid 6px #cc0000;
}

MARKUP

<ul>
 <li>Menu Item</li>
 <li>Menu Item</li>
 <li>Menu Item</li>
 <li>Menu Item</li>
</ul>

РЕДАКТИРОВАТЬ

К сожалению, я не хотел упоминать, что в конечном итоге те левые края на

будут разных цветов, поэтому, к сожалению, с помощью рамки
    не будет работать.
5 ответов

Один из способов - добавить верхнюю и нижнюю границы с помощью псевдоэлементов:

ul {
 list-style: none;
}

li {
 padding:10px;
 border-left: solid 6px #cc0000;
 position: relative;
}

li:first-of-type:before {
 border-top: 1px solid #ccc;
 content: "";
 display:block;
 height: 1px;
 left: 0;
 overflow:hidden;
 position: absolute;
 top: 0;
 width: 100%;
}

li:after {
 border-bottom:1px solid #ccc;
 bottom: 0;
 content: "";
 display:block;
 height: 1px;
 left: 0;
 overflow:hidden;
 position: absolute;
 width: 100%;
}

http://jsfiddle.net/javotLrb/


Если вы обновите свой CSS:

ul{
 list-style: none;
 padding-left:0;
 border-left: solid 6px #cc0000;
}
li:first-of-type{
 border-top: solid 1pt #cccccc;
}

li{
 padding:10px;
 border-bottom: solid 1pt #cccccc;
}

Вы достигнете того, чего хотите.

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

JSFiddle http://jsfiddle.net/1sogmsqe/1/

ИЛИ

Вы можете добавить встроенный элемент в css, который позволит вам изменить цвет левой границы:

HTML

<ul>
 <li><span>Menu Item</span></li>
 <li><span>Menu Item</span></li>
 <li><span>Menu Item</span></li>
 <li><span>Menu Item</span></li>
</ul>

CSS

ul{
 list-style: none;
 padding-left:0;
}
li .first {
 border-top: solid 1pt #cccccc;
}

li.active {
 border-left: solid 6px #00cc00;
}

li.static {
 border-left: solid 6px #cc0000;
}

li .line {
 border-bottom: solid 1pt #cccccc;
 padding:10px;
 display:block;
}

JSFiddle http://jsfiddle.net/1sogmsqe/3/


ОК. Я решил это с помощью элемента psuedo :before. Я говорю "вид", поскольку он не удаляет пересечение в соответствии с моим оригинальным сообщением, но растягивает его до левого края левой границы.

http://jsfiddle.net/boggey79/********/

Мне потребовалось назначить класс

  • . В примере, который я использовал. .active edged green и .recessive edged grey, но я полагаю, вы можете просто добавить больше для разных цветов.

    CSS

    ul{
     list-style: none;
     margin-left:0;
     padding-left:0;
    }
    
    li:first-of-type{
     border-top: solid 1pt #cccccc;
    }
    
    li {
     position:relative;
     border-bottom: 1px solid #e9e9e9;
     padding: 10px 10px 10px 15px;
    }
    
    .active:before{
     content: "";
     background-color: #3ab54a;
     display: block;
     width: 6px;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
    }
    
    .recessive:before {
     content: "";
     background-color: #cccccc;
     display: block;
     width: 6px;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
    }

    MARKUP

    <ul>
     <li>Menu Item</li>
     <li>Menu Item</li>
     <li>Menu Item</li>
     <li>Menu Item</li>
    </ul>

  • Оберните список в div, установив границу слева на цвет и удалите заполнение из ul.

    ul{
     list-style: none;
     padding: 0;
    }
    
    div {
     border-left: solid 6px #cc0000;
    }


    попробуйте этот css:

    ul{
     list-style: none;
     border-left: solid 6px #cc0000;
     padding-left: 0;
    }
    li:first-of-type{
     border-top: solid 1pt #cccccc;
    }
    
    li{
     padding:10px;
     border-bottom: solid 1pt #cccccc;
     margin-left: 0;
    }

    licensed under cc by-sa 3.0 with attribution.