Настройте два горизонтальных списка

Question

Настройте два горизонтальных списка

0

У меня есть навигационное меню нижнего колонтитула, которое должно выглядеть как два горизонтальных списка.

<div class="nav-bottom">
<ul id="top-bnav">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
<ul id="bottom-bnav">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
</div>

Прямо сейчас мой css выглядит так

.nav-bottom {
display: inline;
float: left;
width: 555px;
margin-top: 80px;
}

.nav-bottom ul {
height: 18px;
width: 555px;
display: block;
}

.nav-bottom ul li {
display: inline-block;
    *display: inline;
}

.nav-bottom a{
display: inline-block;
color: #cc7a87;
margin-left: 8px;
}

Теперь это выглядит так: http://jsfiddle.net/Seasamh/48aMJ/

Мне нужно сделать ширину нижнего "li", чтобы отрегулировать ширину верхнего "li", так что ссылка внизу будет точно такой же, как и наверху. Могу ли я это сделать без использования "display: table"?

Заранее спасибо.

vitalym 18 март 2014, в 10:48

Источник

0

Основная проблема заключалась в том, что длина каждой ссылки различна, поэтому определение общей ширины может быть сложным. Прямо сейчас я использую временное решение, я определил margin-right как "li" в верхнем списке, чтобы они соответствовали нижнему списку. Определение «минимальной ширины» также работает, но поскольку длина самой длинной ссылки составляет 130 пикселей, это приводит к сбою макета, поскольку меню кажется слишком длинным.
vitalym 18 март 2014, в 09:36

Теги:

html

css

navigation

html-lists

4 ответа

0

Вы должны определить ширину для .nav-bottom ul li. Вот пример

Ayaz Shah 18 март 2014, в 07:57

0

Вы можете добавить min-width: 50px; на li

скрипка

  .nav-bottom ul li {
      display: inline-block;
      min-width: 50px;
 }

JunM 18 март 2014, в 06:58

0

Определите ширину тега.

демонстрация

.nav-bottom a{
display: inline-block;
color: #cc7a87;
margin-left: 8px;
width: 60px;
}

Navin Rauniyar 18 март 2014, в 06:21

Ещё вопросы

Основная проблема заключалась в том, что длина каждой ссылки различна, поэтому определение общей ширины может быть сложным. Прямо сейчас я использую временное решение, я определил margin-right как "li" в верхнем списке, чтобы они соответствовали нижнему списку. Определение «минимальной ширины» также работает, но поскольку длина самой длинной ссылки составляет 130 пикселей, это приводит к сбою макета, поскольку меню кажется слишком длинным.

Rishabh Shah · Accepted Answer · 2014-03-18T09-13-00.000Z

Прежде всего напишите текст для всех li. Затем возьмем ширину того, что li является максимальным. широкий. Назначьте эту ширину в .nav-bottom ul li.

Не используйте min-width или max-width width.