html - 列出没有重叠边框的项目

Question

我有一个<ul>将被动态添加到使用 jQuery 或诸如此类的东西。每个<li>都会有一个单独的框，基本上是一个选择器。

但是，我注意到并预计每个<li>' 的底部边框都与下一个重叠。这是一个例子：

http://jsfiddle.net/gANNJ/

有没有办法删除这个？我应该只使用分隔符 div 吗？

Answer 1

li {
    margin-top: -1px;
    border: 1px solid red;
    padding: 10px;
}

便宜的做法><。它们没有重叠，它只是从顶部和底部开始的 2px 边框

Answer 2

使用这个我认为这对你有用。

li{
   border: 1px solid black;
   border-top: none;
   padding: 10px;
}
li:first-child {
   border-top: 1px solid black;
}

<ul>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
</ul>

Answer 3

你可以试试这个

li {
    border-bottom: 1px solid black;
    border-left: 1px solid;
    border-right:1px solid;
    padding: 10px;

}
li:first-child {
 border-top:1px solid black;
}

ul{
    list-style-type: none;
    margin: 0px;
}