CSS: как установить 100% ширину в первом окне ul

Question

У меня есть простое навигационное меню UL с шириной 1000 пикселей:

<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

Посмотрите этот пример, я не знаю, что ваше меню динамическое, но если у вас есть «ширина» для других li, то проще:

Демо: 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 2

Логотип обычно не должен входить в меню навигации.Более уместно пометить его как заголовок (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 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

Как указано ранее, отделите логотип от основной навигации. Вместо этого сделайте что-нибудь подобное.

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

Div заголовка - это упаковочный div. Вы можете изменить это на <header></header>, если вы хотите использовать HTML5 (это будет работать во всех браузерах, даже старых). Затем установите ширину логотипа, вы также можете использовать ссылку там. И всплывают ul и логотип слева.

Answer 5

Просто используйте этот CSS

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