How can I expand li elements to container size? - html

Question

I have the following HTML:
#main-menu {
background-color: blue;
border: 1px solid black;
width: 600px;
}
.menu {
list-style: none outside none;
text-align: center;
}
.menu-item {
float: left;
}
.menu-item a {
border: 1px solid red;
}
<div id="main-menu">
<ul class="menu">
<li class="menu-item">Item #1</li>
<li class="menu-item">Item #2</li>
<li class="menu-item">Item #3</li>
<li class="menu-item">Item #4</li>
</ul>
</div>
How do I make the li elements automatically expand euqally to the fixed width of the container?
Thanks in advance! :-)
CodePen link: http://codepen.io/anon/pen/JoKgXz

Answer 1

I've updated you codepen codes..
CSS
#main-menu {
background-color: blue;
border: 1px solid black;
width: 600px;
overflow: hidden;
}
ul, li{
margin:0;
padding:0;
}
.menu {
list-style: none outside none;
text-align: center;
}
.menu-item {
float: left;
width:25%;
}
.menu-item a {
border: 1px solid red;
}
Demo

Answer 2

Ensure you have a proper CSS reset and use the box-sizing:border-box property.
This option has the virtue of not requiring set widths on the li
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main-menu {
background-color: blue;
border: 1px solid black;
width: 600px;
}
.menu {
list-style: none outside none;
text-align: center;
display: table;
width: 100%;
}
.menu-item {
display: table-cell;
}
.menu-item a {
border: 1px solid red;
color: white;
display: block;
}
<div id="main-menu">
<ul class="menu">
<li class="menu-item">Item #1
</li>
<li class="menu-item">Item #2
</li>
<li class="menu-item">Item #3
</li>
<li class="menu-item">Item #4
</li>
</ul>
</d

Answer 3

First remove all margin and padding from the .menu. As you have four items in the menu, add width: 25% to the .menu-item. I've added a display: block to the <a> tag to make it fill the entire width of the .menu-item. As you use float: left the menu-items won't make the .menu container grow. The .menu:after adds a clearfix to have the menu contain all menu items.
Instead of float: left you could also have opted for a display: inline-block. In this case the clearfix wouldn't be necessary, but you need to make sure that the menu items don't have any whitespace (e.g. a newline) between them. Put them on one line like ...</li><li>... otherwise there will be some space between the menu items.
If you need some padding on the menu item make sure to add box-sizing: border-box as otherwise the width will refer to the content only. This means that after adding the padding the menu item will take up more than 25% of the width, which makes the last menu item wrap to a new line.
#main-menu {
background-color: blue;
border: 1px solid black;
width: 600px;
}
.menu {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu:after {
content: '';
display: block;
clear:both;
}
.menu-item {
float: left;
width: 25%;
}
.menu-item a {
display: block;
border: 1px solid red;
}
<div id="main-menu">
<ul class="menu">
<li class="menu-item">Item #1</li>
<li class="menu-item">Item #2</li>
<li class="menu-item">Item #3</li>
<li class="menu-item">Item #4</li>
</ul>
</div>