CODEWITHSUNDEEP
htmlcssalignment
Derrick
Derrick

Reputation: 89

Aligning two lines of horizontal links evenly with CSS

I have 6 links, all different character lengths on two lines. I need everything to align evenly. Like this:

Home       About Us     Location
Contact    Visit        Schedule

I imagine the way to do this is to make the li a specific width and then apply an appropriate margin to the right side, but for some reason I can't apply a width. If I have the following html skeleton, how would I edit the CSS to accomplish this? I've looked around the web for a solution, but I've haven't found any similar questions because my menu sits on two separate lines.

<div class="footer">
 <ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
<br>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>

Upvotes: 0

Views: 8413

Answers (4)

Starx
Starx

Reputation: 78971

Fix the width of <ul> and <li>. And remove the <br /> it makes the markup invalid.

HTML

<ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>

CSS

#footerlinks { width: 300px; }
#footerlinks li { width: 100px; display: inline-block; }

Demo

Demo(with white-space fix)

Upvotes: 1

jaredhoyt
jaredhoyt

Reputation: 1575

First, a <br/> is not a valid child element of <ul/>.

To apply a width to an <li/>, you will need to make it a block-level element.

<ul id="footerlinks">
  <li><a href="link 1">Home</a></li>
  <li><a href="link 2">About Us </a></li>
  <li><a href="link 3">Location</a></li>
  <li><a href="link4">Contact</a></li>
  <li><a href="link5">Visit</a></li>
  <li><a href="link6">Schedule</a></li>
</ul>​

and 

#footerlinks {
    background:#ccc;
    overflow:hidden;
    padding:5px;
    width:300px;
}

#footerlinks li {
    float:left;
    padding:5px 0;
    width:33%;
}​

Here is a working example - http://jsfiddle.net/jaredhoyt/xbvyP/

Upvotes: 0

Maysam
Maysam

Reputation: 7367

Check this:

<pre>
test
&#x09;test
&#x09;&#x09;test
</pre>

Source: How do I create tab indenting in html

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

Give the li elements a display property of inline-block and a width. Here's a jsfiddle to demonstrate:

li { display: inline-block; width: 100px; }

Upvotes: 0

Related Questions