CODEWITHSUNDEEP
css
Awais Imran
Awais Imran

Reputation: 1344

ul grid without specific borders

I want to remove the border of the corners same as shown in following attached image without using the specific classes as this grid is generating number of columns on run time as per data. Please guide me how can I achieve this?

Fiddle

HTML:
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

ul{list-style:none; width:260px;}
ul li{
    display:block;
    width:50px;
    height:50px;
    border:1px solid black;
    float:left;
    margin-left:-1px;
    margin-top:-1px;
}

Upvotes: 3

Views: 1262

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

You can drop border-bottom and border-right. reset padding on ul and set overflow to hidden: DEMO

You can tune box model too if you wish to, but unnecessary to see it working

and if i remove an li ?

does ul width matters ?

Upvotes: 3

Ejaz
Ejaz

Reputation: 8872

using following CSS (for this particular context)

     ul{ list-style: none; width: 260px; }
     ul li{
        display: block;
        width: 50px;
        height: 50px;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        float: left;
     }

     ul li:nth-child(5n){
        border-right: none;;
     }

     ul li:nth-child(n + 21){ border-bottom: none; }

you'll not need the negative margin hack to hide overlapping borders

Upvotes: 1

Related Questions