CODEWITHSUNDEEP
htmlcss
Brandon Dorris
Brandon Dorris

Reputation: 138

How to make an inline <ul> stretch full width of container

My HTML

<div id="main_navigation">
    <ul><li><a href="/One">One</li></a><li><a href="/Two">Two</li></a><li><a href="/three">Three</li></a>
    </ul>
</div>

My CSS

#main_navigation ul {
margin: 10px 0 15px 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#main_navigation ul li {
display: inline;
font-size:24px;
}

#main_navigation ul li a {
text-decoration: none;
padding: .2em 1em;
color: #cbc19e;
background-color: #322918;
}

#main_navigation ul li a:hover {
color: #322918;
background-color: #cbc19e;
}

This looks perfect EXCEPT it does not quite stretch out to the full width of the rest of the objects on the page. The container has:

margin:0 50px 0 50px;

as do all of the other containers on the page. The only one that does not stretch the full width is the nav bar. I would not like to use tables or jscript if possible. Suggestions?

Upvotes: 1

Views: 31014

Answers (3)

Saravanan Kasi
Saravanan Kasi

Reputation: 696

#main_navigation ul 
    {display:table;
    width:100%;}
#main_navigation ul li {
    list-style-type: none;
    display: table-cell;

}

Upvotes: 2

Jia
Jia

Reputation: 395

#main_navigation ul li {
  display: inline-block;
  font-size:24px;
}

#main_navigation ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #cbc19e;
  background-color: #322918;
  width: 200px;
  display: block;
}

Change the display attribute to inline-block and block respectively, and set width to whatever you want.

Upvotes: 2

Question Overflow
Question Overflow

Reputation: 11255

Basically, you just have to apply display: block, float: left and width: 33.3% on <li> elements to make them stretch out the full width of the <ul> element, which is already at 100% of the containing <div>.

See how it works in this demo.

The code is as follows:

#container {
    margin:0 50px 0 50px;
}

#main_navigation ul {
    margin: 10px 0 15px 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    background: cyan;
    overflow: hidden;
}

#main_navigation ul li {
    margin: 0;
    padding: 0;
    display: block;
    font-size:24px;
    width: 33.3%;
    float: left;
}

#main_navigation ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #cbc19e;
    background-color: #322918;
}

#main_navigation ul li a:hover {
    color: #322918;
    background-color: #cbc19e;
}

Note that there are mistakes in the links within your HTML code,

It should be:

 <div id="main_navigation">
  <ul>
   <li><a href="/One">One</a></li>
   <li><a href="/Two">Two</a></li>
   <li><a href="/three">Three</a></li>
  </ul>
 </div>

Upvotes: 1

Related Questions