CODEWITHSUNDEEP
htmlcsshtml-listsborder
lawx
lawx

Reputation: 388

List items without overlapping borders

I have a <ul> that WOULD be dynamically added to using jQuery or whatnot. Each <li> would have a separate box around it, basically a selector.

However, I notice and anticipated that each <li>'s bottom border is overlapping with the next. Here's an example:

http://jsfiddle.net/gANNJ/

Is there a way to remove this? Should I just use separator divs instead?

Upvotes: 5

Views: 3717

Answers (3)

Bhavik Hirani
Bhavik Hirani

Reputation: 2016

use this i think this is work for u. 

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>

Upvotes: 0

sAnS
sAnS

Reputation: 1163

You may try this 

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

Upvotes: -1

Warai Otoko
Warai Otoko

Reputation: 285

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

Cheap way of doing it ><. They are not overlaping, its just 2px border from top and bottom

Upvotes: 6

Related Questions