CSS:单独列出项目列表项

时间:2014-06-16 01:59:56

标签: html css position html-lists

鉴于以下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(而不更改HTML )来定位元素,如下所示:

Home                                                     About  Blog  Contact

第一个列表项应该左对齐。其余的应该是右对齐的。

不要只是绝对定位一切。例如,如果我想更改&#34; Blog&#34;到我的博客,&#34;那么我不应该为了让事情保持良好状态而改变CSS。

2 个答案:

答案 0 :(得分:1)

你可以达到以下目的。

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!!

答案 1 :(得分:0)

这有效,但不是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;
}