Question

我想给li一个1px的边框。 li之间没有边距也没有填充。

border-collapse:collapse;在这种情况下不起作用。所以我遇到的唯一事情就是给他们border-bottom和border-right。

这很有效。但问题是我是否希望边框在悬停时改变颜色。然后只有底部和右边框改变颜色。

还有其他方法可以实现这个目标吗？

Answer 1

您可以尝试以下内容。下面的填充可以省略。

CSS

ul{
    border: 0 solid #ddd;
    border-width: 0 0 1px 1px;
    margin:0px; padding:0px;
}

li{
    border: 0 solid #ddd;
    border-width: 1px 1px 0 0;
    padding:.5em;
}

li:hover{
    border: 1px solid #ff0000;    
}

或者

li {
    border: 1px solid #ddd;
}

li:not(:first-child) {
    border-top: 0;
}

li:hover{
    border-top: 1px;
    border: 1px solid #ff0000;    
}

HTML

<ul>
    <li>first bullet</li>
    <li>second bullet</li>
    <li>third bullet</li>
</ul>

First jsFiddle | Second jsFiddle

Answer 2

您可以使用

li {
    border-style: solid;
    border-width: 1px;
}

JS Fiddle Demo

带边框的列表上的翻转边框折叠

2 个答案: