CODEWITHSUNDEEP
htmlcss
Omer
Omer

Reputation: 317

The list's width is bigger then is should

I dont get why there is a big space in the <li>s, why the border is not warping the text. fiddle

i want the widht of every <li> to be like the biggest <li>

Thanks for the help :D

Upvotes: 0

Views: 32

Answers (2)

maximkou
maximkou

Reputation: 5332

Use css tables, see fiddle here http://jsfiddle.net/UWLzL/22/.

Css source:

#settingNev ul {
    display:table;
}
#settingNev ul li {
    display:table-row;
}
#settingNev ul li a {
    display: table-cell;
    border-radius: 6px 6px 0px 0px;
    color: #666;
    padding: 5px 3px;
    border: 1px solid transparent;
}
#settingNev ul li a:hover {
    border: 1px solid black;
    border-bottom: 1px solid transparent;
}

Upvotes: 1

Purple Hexagon
Purple Hexagon

Reputation: 3578

Removing width 100% from #settingNev a will reduce the size to the length of string in span element. Or you could set a specific width if you need them to all be the same.

http://jsfiddle.net/rtT8L/

#settingNev a {
  float: left;
  margin: 0 3px 0 3px;
  text-decoration: none;
  border-radius: 6px 6px 0px 0px;
  /*width: 200px;*/
}

---------------UPDATE-----------------------------

http://jsfiddle.net/NZc6K/

These above fiddle should do the trick. Basically this was because of how 100% width works with padding so I moved the large padding you had on the ul to the div it is wrapped in.

To read more about the box model see http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/

Upvotes: 1

Related Questions