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