Question

鉴于以下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。

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

Answer 2

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

CSS：单独列出项目列表项

2 个答案: