CODEWITHSUNDEEP
csshtmlhtml-lists
Ivan Seidel
Ivan Seidel

Reputation: 2362

How to separate li's equally

I have a UL > li's in my html, and the li's are set to float: left.

My doubt is how to separate them, inside a father div, equally, so that doesn't matter how many li's are in the ul, they still have the same spacing between them?

If li's are not 'good' to do that, what is better?

Upvotes: 2

Views: 6482

Answers (2)

sandeep
sandeep

Reputation: 92803

As per I understand is better you can write like this:

li + li{
    margin-left:10px;
}

You can also use display:table property for this. Write like this:

ul{
    display:table;
    width:100%
}
li{
    display:table-cell;
}

Upvotes: 5

Alfred
Alfred

Reputation: 21386

You may set a border to the ul and set a margin to child lis. Or you may set border both to ul and lis. The reason for parent border is, when lis merge, they will combine their borders creating a double border where they meet.

Here is a Live Demo showing both methods.

Upvotes: 0

Related Questions