Question

我有一个宽度为1000px的简单UL导航菜单：

<ul class="menu">
    <li class="first"><a href="/">google</a></li>
    <li><a href="/">google</a></li>
    <li><a href="/">google</a></li>
</ul>

那么，如何设置第一个元素以适应整个UL宽度并推送右侧的其他列表项（所有LI应该在同一行 - 水平菜单）？

我知道我可以float:left第一个和float:right其余的，但这将颠倒右浮动元素的顺序。

我需要一个快速的，仅限CSS的解决方案，甚至在IE6中工作。

提前致谢！

更新：澄清一下，第一个元素是徽标，最终结果就像9gag.com的标题，除了徽标应该在左边，所有链接都在右边。

Answer 1

徽标通常不应该是导航菜单的一部分。将其标记为主页（H1在主页上，H3在其他页面上标记更合适。

<h3><a href="/">MyBrand</a></h3>

<ul>
    <li><a href="/products/">Products</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

您可以使用float: right列出自己的UL列表，将菜单右侧对齐。

Answer 2

看到这个例子，我不知道你的菜单是动态的，但是如果你有其他人的'宽度'，那就更容易了

演示：http://jsfiddle.net/e6SWD/12/

.menu {
  margin-left: 84px; /* width others 2 li's */
  width: 1000px
}

.menu li {
  display: inline;
}

.menu li.first {
  display: block;
  float: left;
  margin-left: -84px; /* width others 2 li's */
  width: 100%
}

Answer 3

现在有更多的澄清：

http://jsfiddle.net/6DkVx/2/

ul {
  width: 1000px;   
  position: relative;
  text-align: right;
}
li {
  display: inline-block;
}
.first { 
  position: absolute; 
  top: 0; left: 0; 
}

Answer 4

只需使用此CSS

.menu li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}

Answer 5

如前所述，将徽标与主导航区分开。做这样的事情。

<div id="header>
<div id="logo">Logo here</div>
<ul><li>Rest of links here</li></ul>
</div>

标题div是包装div。如果你想做HTML5，你可以将其更改为<header></header>（这适用于所有浏览器甚至是旧浏览器）。然后设置徽标的宽度，你也可以使用链接。并将ul和徽标浮动到左侧。

CSS：如何在ul的第一个li上设置100％的宽度

5 个答案: