Предотвращение обертывания пунктов меню

Ответ 1

Когда вы не знаете ширину, потому что ссылки могут различаться по ширине, вы можете использовать display: inline-block в элементе списка <li> и в white-space:nowrap в самом списке <ul>

http://jsfiddle.net/Frd8J/

Ответ 2

Вы должны установить min-width для #cssmenu > ul, которая позволяет всем вашим пунктам меню соответствовать.

Ответ 3

Принятый ответ не работал в моем случае, но @Ana оригинальный ответ. Я попытался добавить это как комментарий к ее ответу, но это не поместилось. Положив минимальную ширину на UL, как было предложено, все необходимые элементы LI вернулись к одной строке, но эта строка была расширена справа от содержащего div. Я добавил ту же минимальную ширину в родительский div, и я получил то, что хотел, все LI на одной строке в контейнере. В качестве последнего шага я удалил минимальную ширину из UL (так что это другой, более общий ответ, чем Ana's), и все по-прежнему работает. В оболочке ореха, если вы сделаете UL nowrap в css, как описано в принятом ответе, и он все равно обертывается, тогда убедитесь, что вы предоставили список достаточно ширины, чтобы его не нужно было обертывать. Другой способ увеличить ширину, которая также работает (без использования min-width), заключается в увеличении ширины области содержимого ниже UL в содержащем div. Мой случай был с вкладкой DIV, LI были вкладками сверху. На каждой вкладке было содержимое ниже. Когда содержание ниже было достаточно широким, LI остались в одной строке. Я мог бы установить минимальную ширину для каждого содержимого вкладки, но для меня лучше было поместить ее на внешний контейнер. НТН.

Ответ 4

im, предполагая, что это элементы навигационной панели

<li class="home"><a href='home.jsp'><span>Home</span></a></li>
<li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>
<li><a href='#'><span>Fun</span></a></li> 
<li><a href="#"><span>Deals</span></a></li>
<li><a href="#"><span>Wheelz</span></a></li>
<li><a href='#'><span>About</span></a></li>

если вы просто поместите их вот так

<li class="home"><a href='home.jsp'><span>Home</span></a></li>&nbsp;<li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>&nbsp;<li><a href='#'><span>Fun</span></a></li>&nbsp;<li><a href="#"><span>Deals</span></a></li>&nbsp;<li><a href="#"><span>Wheelz</span></a></li>&nbsp;<li><a href='#'><span>About</span></a></li>

все, что вам нужно сделать, - это объединить их все вместе без пробелов между тегами li и start, теперь они отображают все строки без видимых пробелов между вашими навигационными элементами на загруженной странице, поэтому вы можете не захотеть их всех чтобы быть визуально объединенным, как его один бар, поэтому iv также поместите код для пробела между конечными и начальными тегами li, это даст вам одно пространство между всеми навигационными тегами визуально на загруженном экране, но они все равно будут связаны друг с другом поэтому, если вы сделаете экран узким.

Ответ 5

У меня такая же проблема, когда мои пункты меню переносятся на следующую строку. Это потребовало нескольких изменений. Во-первых, мне пришлось установить <ul> чтобы максимальная высота и переполнение были скрытыми. Тогда мне просто нужно было установить ширину в родительский контейнер.

В моем случае, так как дизайн реагирует на изменения и изменяется область (поскольку меню окружено с обеих сторон элементами с заданной жесткой шириной), мне пришлось расширить область, указанную по мере ее роста.

#primary-menu {
  display: none;
}

@media screen and (min-width: 59em) {
  #primary-menu {
    display: inline-block;
    width: 74%;
  }
}

@media screen and (min-width: 64em) {
  #primary-menu {
    width: 78%;
  }
}

@media screen and (min-width: 78.75em) {
  #primary-menu {
    width: 83%;
  }
}

ul {
  max-height: 53px;
  overflow: hidden;
}

<div id="primary-menu" class="menu">
  <ul class="menu menu__navigation--primary">
    <li class="first leaf active-trail">
      <a href="/equipment" class="active-trail active">Equipment</a>
    </li>
    <li class="leaf">
      <a href="/solutions">Solutions</a>
    </li>
    <li class="leaf">
      <a href="/services">Services</a>
    </li>
    <li class="leaf">
      <a href="/locations">Locations</a>
    </li>
    <li class="leaf">
      <a href="/our-company">Our Company</a>
    </li>
    <li class="last leaf">
      <a href="/contact-us">Contact Us</a>
    </li>
  </ul>
</div>