CODEWITHSUNDEEP
csstwitter-bootstrapwidthhtml-lists
Tal
Tal

Reputation: 355

Set all the <li> to have the same width

I want to build a navbar with bootstrap which all the cell in it will have the same width.

I tried the code above, but it doesn't work well. How can I fix it? 

.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
    direction: rtl;
}

.navbar .nav > li {
    float: right;
    display: table-cell;
    width: auto;
    float: none;
    text-align: center;
    direction: rtl;
}
.navbar .nav > li:hover {
background-color: #808080
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 333px 3px 0;
}

Example: http://jsfiddle.net/abzvw0m3/ (when screen width is bigger than 768 px)

Upvotes: 0

Views: 9790

Answers (4)

Gerry Kelly
Gerry Kelly

Reputation: 23

Change your li to have a fixed width or percentage width of a value similar to that of the largest li you will be using,

for instance:

width: 132px;

or

width: 20%;

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133360

try with adding the width

.navbar .nav > li {
float: right;
display: table-cell;
width: auto;
float: none;
text-align: center;
direction: rtl;
width: 15%;;    /* add the width use % for dinamic**/
}

Upvotes: 0

Luís P. A.
Luís P. A.

Reputation: 9739

To have the same cell width, you must set on the ul.nav the rule table-layout: fixed;

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
    direction: rtl;
    table-layout: fixed; 
}

.navbar ul.nav  li {
    float: right;
    display: table-cell;
    width: 100%;
    float: none;
    text-align: center;
    direction: rtl;
}

DEMO HERE

Upvotes: 0

Petros Kyriakou
Petros Kyriakou

Reputation: 5343

changed it to this,all li elements will have 10% width of its parent.

.navbar .nav > li {
    float: right;
    display: inline-block;
    width: auto;
    float: none;
    text-align: center;
    direction: rtl;
    width:10%;
    font-size:12px;
}

Upvotes: 2

Related Questions