边缘颜色为李的底部的一部分

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。这是一个fiddle。

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;
}

---

这是一个different solution，使用@Sean Dunwoody建议的:after伪类。

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%;
}

注意：IE7不支持:after - 。

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;
}