html - li底部部分边框颜色

Question

我有下一个列表：http: //jsfiddle.net/4Mc7X/190/

ul {
    padding: 0;

}
li {
    float: left;
    padding: 0;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
}

是否可以选择使红色边框不是全部底部？

例如：

任何帮助表示赞赏！

Answer 1

如果您在li.

您最好的选择是在 中使用另一个样式元素li，例如div. 这是一个小提琴。

HTML：

<ul>
    <li>
        Stuff
        <div></div>
    </li>
</ul>

CSS：

li {
    border: solid 1px red;
    border-bottom: 0;
}
div {
    width: 60%;
    border-bottom: solid 1px red;
}

---

这是一个不同的解决方案，使用:after@Sean Dunwoody 建议的伪类。

HTML：

<ul>
    <li>
        Stuff
    </li>
    <li>
        More Stuff
    </li>
    <li>
        Even More Stuff
    </li>    
</ul>

CSS：

li {
    border: solid 1px red;
    border-bottom: 0;
    margin: 1em 0;
}

li:after {
    content: ' ';
    display: block;
    height: 1px;
    border-bottom:solid 1px red;
    width: 80%;
}

注意：:after在 IE7 中不支持。

Answer 2

您可以在 div 上应用边框并为其指定百分比宽度，使其不是 li 宽度的 100%，如下所示：

li {
    border: solid 1px #f00;
    border-bottom: 0;
    float: left;
    margin: 0;
    padding: 0;
    width: 114px;
}

div { border-bottom: 1px solid #f00; width: 80%; }

（显然，您还需要删除 li 的底部边框才能正常工作）

如果你想看到它的实际效果，还有一个小提琴：

http://jsfiddle.net/C2ttY/

Answer 3

您也可以使用 :after 伪元素来实现，而无需在 li 中添加额外的 div：

<ul>
    <li>first</li>
</ul>

ul {padding:0;}
li {float:left; padding:0; width:114px; border:solid 1px #f00; border-bottom:none; margin:0; position:relative;}
li:after {content:""; border-bottom:1px solid #f00; position:absolute; bottom:0; left:0; width:100px; height:0;}

http://jsfiddle.net/4Mc7X/191/

Answer 4

为什么不在 li 上使用背景图像来创建底部边框效果。1px 高的红色和相当宽的 - 比如 300px - 另存为 png-8 或 gif 以减小文件大小。然后与 li 的底部和右侧 10px 对齐：

li {
float: left;
padding: 0;
width: 114px;
border-top: solid 1px #f00;
border-left: solid 1px #f00;
border-right: solid 1px #f00;
margin: 0;
background-position: right 10px bottom;
background-image: url("yourborderimage.png");
display: block;
padding: 4px 0 4px 0;
}