CODEWITHSUNDEEP
htmlcsspositionhtml-lists
ma11hew28
ma11hew28

Reputation: 126327

Position list items separately

Given the following HTML,

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Give me the best CSS (without changing the HTML) to position the elements like so:

Home                                                     About  Blog  Contact

The first list item should be left-aligned. The rest should be right-aligned.

Don't just position everything absolutely. For example, if I want to change "Blog" to "My Blog," then I shouldn't have to change the CSS for things to stay looking good.

Upvotes: 0

Views: 1869

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

You can achieve like below.

HTML

 <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

CSS

 ul
{
 float:right;
 width:100%;    
 display:table;
}
ul li
{ 
 list-style-type:none;
 padding:0px 10px;
 background-color:#ff00ff;  
 text-align:right;
 display:table-cell;
 width:1px;
}
ul li:first-child
{
 display:table-cell;  
 float:left;
 width:auto;
}

Have a Fiddle!!

Upvotes: 1

ma11hew28
ma11hew28

Reputation: 126327

This works but doesn't ignore the whitespace between the inline-block list items.

ul {
  margin: 0 auto;
  padding: 0;
  text-align: right;
  width: 1024px;
}

ul > li {
  display: inline-block;
}

ul > li:first-child {
  float: left;
}

ul > li > a {
  display: block;
  padding: 14px 21px;
}

Upvotes: 0

Related Questions