小贝子编程

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



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

我已经将 html 和 CSS 的副本上传到 JSFiddle（我相信这将是经验丰富的程序员的意大利面条代码，因为我在去的时候学到了）。

我放了一个随机的 Youtube 图像，真实图像将去哪里（虽然大小相同），所有文本都是随机的，但栏的布局是相同的，右侧较小的徽标按钮也是如此，它们都链接到 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>

您可以将媒体查询添加到 css。你的有点长，所以我只是做了一个快速的例子来改变背景，你可以在查询中改变你喜欢的任何内容。调整为 400 像素以下，li 背景将发生变化。在导航栏中添加了最小宽度以阻止其换行

#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>

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.

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium