如何停止 CSS/HTML 导航菜单在不同分辨率下换行？

Question

我是 CSS 的新手，但多年来一直在使用其他各种语言。我已经成功地在我的网站上添加了一个导航栏，但是当以较小的 window 或较低的分辨率查看时，导航栏会自行包裹。我花了好几个小时浏览互联网，并尝试以帮助其他人的方式修改代码，但尚未找到解决方案。理想情况下，我想要的是它随着分辨率或 window 大小的变化而重新调整大小，但如果这太难或无法完成，只需锁定大小以便用户必须滚动也可以.

我已经将 html 和 CSS 的副本上传到 JSFiddle（我相信这对有经验的程序员来说将是意大利面条代码，因为我边学边学）。

我放了一张随机的 Youtube 图片，真实图片会放在那里（尽管大小相同），所有文本都是随机的，但栏的布局是相同的，右侧较小的徽标按钮也是如此全部 link 到 facebook。

如有任何帮助，我们将不胜感激。如果您需要更多详细信息，我会定期查看并提供尽可能多的信息！！

再次感谢您的帮助。

CSS代码为：

/* ----- CSS Nav Menu Styling ----- */
#cssnav { 
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
margin-top: 0px;

}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
white-space: nowrap;

}

#cssnav li {
float: none; /* none = centre */
display: inline-block;
margin-top: 20px;
padding: 0px;
white-space: nowrap;
}

#cssnav li a {
background: white repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;

}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a { 
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 160px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}



.navleft {float:left} .navright {float:right;} .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px;}

body .navbar { height: 0px; }


/*change background colour here to modify a lot of navbar*/
.tabs-inner .widget ul, .tabs-inner .widget li a, .tabs-inner .section:first-child ul { background: white; border: 0px;}
#navigationbar {width: 100%; height: 96px; background: white repeat-x scroll 0 -800px; _background-image: none; position: fixed; top: 0px; left: 150px; z-index: 999; width:75%;}

HTML代码如下：

<div id="navigationbar">

<ul id="cssnav" class="navleft">

<img src="http://alpineskin.com/wp-content/uploads/2011/10/youtube-logo-small.jpg" height="80" width="300" />

</ul>

<ul id="cssnav" class="navright">

<li class="active"><a href='http://www.google.com'>Home</a></li>
<li class="sub"><a href='LINK'>About</a>
<ul>
<li><a href='http://www.google.com'>pmf dpfkf</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>pkf dpfdkf</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>Extras</a>
<ul>
<li><a href='http://www.google.com'>pdfkdf</a></li>
<li><a href='http://www.google.com'>pdfdfp fopdff fdopkf</a></li>
<li><a href='http://www.google.com'>pokef ofkdpf fopk</a></li>
<li><a href='http://www.google.com'>pokdsf</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>pkedpf</a>
<ul>
<li><a href='http://www.google.com'>poksfd</a></li>
<li><a href='http://www.google.comhttp://www.google.com'>pkp</a></li>
<li><a href='http://www.google.com'>pkdpdfk</a></li>
<li><a href='http://www.google.com'>pip</a></li>
<li><a href='http://www.google.com'>ppjpp</a></li>
<li><a href='http://www.google.com'>perwp</a></li>
<li><a href='http://www.google.com'>ipfjipfipj</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>pffp</a>
<ul>
<li><a href='http://www.google.com'>pdjfdspfjd</a></li>
<li><a href='http://www.google.com'>pdfdpfjd</a></li>
<li><a href='http://www.google.com'>opsdfdfopdf</a></li>
<li><a href='http://www.google.com'>psdofdsfpfsdp</a></li>
</ul>
</li>
<li class="last"><a href='http://www.google.com'>dsopdfop</a>
</li>



<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<!-- ADD MORE ICONS HERE -->



</ul></div>

Answer 1

您可以向 css 添加媒体查询。你的有点长，所以我只是做了一个改变背景的简单例子，你可以在查询中改变你喜欢的任何东西.. 调整到 400px 以下并且 li 背景将 change.added min-width 到导航酒吧也停止它包装

#navigationbar ul li{list-style-type:none;display:inline-block;}
#navigationbar ul li ul{display:none;}
#navigationbar ul li:hover ul{display:block;position:absolute;}
#navigationbar ul li:hover ul li{display:block;}
@media screen and (max-width: 400px) {
    ul li{
        background-color: lightblue;
    }
  #navigationbar ul{min-width:700px;}
}

<div id="navigationbar">

<ul id="cssnav" class="navleft">

<img src="http://alpineskin.com/wp-content/uploads/2011/10/youtube-logo-small.jpg" height="80" width="300" />

</ul>

<ul id="cssnav" class="navright">

<li class="active"><a href='http://www.google.com'>Home</a></li>
<li class="sub"><a href='LINK'>About</a>
<ul>
<li><a href='http://www.google.com'>pmf dpfkf</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>pkf dpfdkf</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>Extras</a>
<ul>
<li><a href='http://www.google.com'>pdfkdf</a></li>
<li><a href='http://www.google.com'>pdfdfp fopdff fdopkf</a></li>
<li><a href='http://www.google.com'>pokef ofkdpf fopk</a></li>
<li><a href='http://www.google.com'>pokdsf</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>pkedpf</a>
<ul>
<li><a href='http://www.google.com'>poksfd</a></li>
<li><a href='http://www.google.comhttp://www.google.com'>pkp</a></li>
<li><a href='http://www.google.com'>pkdpdfk</a></li>
<li><a href='http://www.google.com'>pip</a></li>
<li><a href='http://www.google.com'>ppjpp</a></li>
<li><a href='http://www.google.com'>perwp</a></li>
<li><a href='http://www.google.com'>ipfjipfipj</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>pffp</a>
<ul>
<li><a href='http://www.google.com'>pdjfdspfjd</a></li>
<li><a href='http://www.google.com'>pdfdpfjd</a></li>
<li><a href='http://www.google.com'>opsdfdfopdf</a></li>
<li><a href='http://www.google.com'>psdofdsfpfsdp</a></li>
</ul>
</li>
<li class="last"><a href='http://www.google.com'>dsopdfop</a>
</li>



<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<li><a href="www.facebook.com" target="blank" title="DESCRIPTION OF LINK/WEBSITE"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-128.png" border="0" height="20" width="20"/></a></li>
<!-- ADD MORE ICONS HERE -->



</ul></div>

Answer 2

First if all correction to your HTML. You have used 'cssnav' as id multiple times so please try to implement the functionality without same id. 

To be specific to your requirement, add min-width to menu element and adjust the position through media query to the menu element. I have added sample position to your code in link http://jsfiddle.net/tyebufov/.

Like this you can position the menu element in various resolutions as per your requirement.

如何停止 CSS/HTML 导航菜单在不同分辨率下换行？

How to stop CSS/HTML navigation menu wrapping at different resolutions?

html

css

navigation

word-wrap

navbar