CODEWITHSUNDEEP
htmlcss
Andz
Andz

Reputation: 3

CSS a list so it's the same size

I have some sort of tab using the following format : 

<ul id="tabs">
    <li class="active"><a href="#">One</a></li>
    <li class=""><a href="#">Two</a></li>
    <li class=""><a href="#">Three</a></li>
    <li class=""><a href="#">Four Long Word</a></li>
    <li class=""><a href="#">Five</a></li>
</ul>

However I don't know how to make all < li > the same height such that when active and the color different the box not to look disjonted.

This is the jsfidle : http://jsfiddle.net/BzTjb/9/

The js code was taken from another fiddle and it's not the one I'm using in the site, it's just for demonstration here since it's simple.

Upvotes: 0

Views: 71

Answers (4)

Teknotica
Teknotica

Reputation: 1136

You have plenty of options but all depends of what you really want to achieve. I usually do the following:

li a {
    display: block;
    width: 300px; /* Or any width you want to fit your content */
    float: left;
    padding: 10px 15px;  /* All this is optional */
    margin-right: 15px; /* All this is optional */
}

or

li a {
    display: inline-block;
    width: 300px; /* Or any width you want to fit your content */
    padding: 10px 15px;  /* All this is optional */
    margin-right: 15px; /* All this is optional */
}

Upvotes: 0

reaxis
reaxis

Reputation: 1431

Try changing the display property of the li to table-cell and remove the float: left, so the CSS for the li will look like this:

li {
    width: 20%;
    margin: 0; padding: 0;
    position: relative;
    display: table-cell;
}

Updated JSFiddle

Upvotes: 1

APAD1
APAD1

Reputation: 13666

Instead of specifying a pixel width for the tabs, just use width:auto and the tab will be the correct width based on the content.

ul#tabs {
    width: auto; list-style: none;
    display: block; clear: both;
}

Updated JSFiddle

Upvotes: 0

TylerH
TylerH

Reputation: 21092

The Four Long Word link is wrapped because the container tab has a fixed width of 300px. Expanding this width will allow it to display in a single line. Doing this alone won't be a pretty, one-step solution, however; you might need to alter some padding as well. It's up to you to determine exactly how you want it to look.

Alternatively, you can try width: auto; to give it a responsive width.

Upvotes: 0

Related Questions