Menu - Style ul / li to be width depend on text lenght - html

Question

i am trying to style my menu. I had a working code but notied that parent div is smaller then child div. I am pretty sure its not right so i try to edit it a bit but now i have a problem with it. It looks like:
As you can see last part of menu "FLASHOVKY" is on another line, and all li is same width dispite the fact text is different lenght.
CSS:
#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
HTML:
<nav id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</nav>
Can somebody help me with that guys?
p.s. Live demo : http://funedit.com/andurit/try11/

Answer 1

1] You can fix this by setting box-sizing:border-box;. The issue is the padding on your <a> tags, it's causing the content to overflow because the padding and border are placed outside of the content box.
2] To fix the spacing issue, you need to add a float: left; to #menu ul li. The reason for this is because the <a> tags nested in #menu ul li are floated left. That's why the links were offset.
Change this:
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
To this:
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
float:left; /* Add this float to remove extra space */
}
#menu ul li a {
-webkit-box-sizing: border-box; /* Safari, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}

Answer 2

Try playing around with the min-width values in your css.

Answer 3

#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px; // this property causing you to make all box of same size and it occupie the 100px wether text is small or large
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px; // dont fix width
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}

Answer 4

Use float:left instead of display block..and only use height if you need..yes inline and float:left has for different use..but may be you will like..
#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
border:1px solid;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
width:100%;
}
#menu ul li {
color: #000;
height: 44px;
float:left;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #000;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
margin-left: 8px;
display: block;
}