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

Я создал горизонтальную навигационную панель (меню) для моего сайта. Когда я изменил размер моего окна на меньший размер, чем на панели, элементы меню будут обернуты. Я хочу, чтобы меню оставалось неповрежденным (то есть оно должно оставаться горизонтальным) независимо от размера окна, как это обычно видно на сайтах, таких как Google. Я пробовал различные способы размещения на различных форумах, включая этот, но ничего не работало для меня. Ниже я вставил свой CSS-код для меню.

CSS CODE:

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: #6699CC; box-shadow: 0px 2px 3px rgba(0,0,0,.4); }


#cssmenu > ul > li {
    float: left; 
    margin-left: 30px;
    position: relative;

}

#cssmenu > ul > li > a {
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 70px;
    padding: 15px 20px;
-webkit-transition: color .15s;
   -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;

}

#cssmenu > ul > li > a:hover {color: #00FF00; }
body.home li.home, body.tech li.tech {font-weight:bold; }

#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: #FFFFFF;
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}

#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}

#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
        transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}

#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}


#cssmenu ul ul a:hover{
    background-color: rgb(205,44,36);
    color: rgb(240,240,240);
}

Код HTML:

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link href="styles.css" rel="stylesheet" type="text/css">
 <title>Home</title>
</head>
<body class="home" background="teenscorner1.jpg" text="#FFFFFF" style="background-attachment: fixed">
 <div id='cssmenu'>
  <ul>
   <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>
  </ul>
 </div>
</body>

Ответ 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>