Question

请参阅以下mock-up here。我试图让水平边框从左边框的右边缘开始（即没有交叉）。

很像这样：

Borders with no intersect

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>

修改

对不起，我没有提到最终<li></li>上的左边缘会有不同的颜色，所以不幸的是应用边框<ul>将不起作用。

Answer 1

如果您将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元素的中间点相互平分，以便miters看起来正确。将左边框添加到父元素解决了问题。

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

OR

您可以在css中添加内联元素，以便更改左边框的颜色：

HTML

<ul>
    <li class="static"><span class='line first'>Menu Item</span></li>
    <li class="static"><span class='line'>Menu Item</span></li>
    <li class="active"><span class='line'>Menu Item</span></li>
    <li class="static"><span class='line'>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/

Answer 2

一种方法是使用伪元素添加顶部和底部边框：

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/

Answer 3

将列表包装在div中，将border-left设置为颜色，然后从ul中删除填充。

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

div {
  border-left: solid 6px #cc0000;
}

Answer 4

试试这个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;
}

Answer 5

好的我用psuedo元素:before解决了这个问题。我说“有点”，因为它没有按照我的原始帖子移除相交，而是将其拉伸到左边框的左边缘。

http://jsfiddle.net/boggey79/n0eppvmc/

确实需要我为<li>分配一个班级。在示例中，我使用了.active边缘绿色和.recessive边缘灰色，但我想您可以为不同颜色添加更多颜色。

<强> 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 class='active'>Menu Item</li>
    <li class='recessive'>Menu Item</li>
    <li class='recessive'>Menu Item</li>
    <li class='recessive'>Menu Item</li>
</ul>

偏移水平边框开始

5 个答案: