html - 境界線が重ならないリスト項目

Question

<ul>jQueryなどを使用して動的に追加される可能性があります。それぞれ<li>の周りに個別のボックス、基本的にはセレクターがあります。

<li>ただし、それぞれの下の境界線が次の境界線と重なっていることに気付き、予想しました。次に例を示します。

http://jsfiddle.net/gANNJ/

これを取り除く方法はありますか？代わりに区切り div を使用する必要がありますか?

Answer 1

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

安く済ませる方法＞＜。それらは重なっておらず、上下からわずか 2 ピクセルの境界線です。

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