列出没有重叠边框的项目

Question

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

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

http://jsfiddle.net/gANNJ/

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

Answer 1

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

这样做的便宜方式＆gt;＆lt;。 它们没有重叠，它只是顶部和底部的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;
}