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

标签 html css navigation navbar word-wrap

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

我已将 html 和 CSS 的副本上传到 JSFiddle (我相信这对有经验的程序员来说将是意大利面条代码，因为我在学习过程中学到了)。

我放了一张随机的 Youtube 图片，真实图片会放在那里(尽管大小相同)，所有文本都是随机的，但栏的布局是相同的，右侧较小的 Logo 按钮也是如此，所有链接到 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>

关于html - 如何停止 CSS/HTML 导航菜单以不同的分辨率换行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27897464/

上一篇：HTML5/CSS3 : Hover Image Replacement

下一篇：css - 有什么方法可以使用纯 CSS 来制作按比例的边距吗？

相关文章：

html - css 更有效率？更改箭头和标题的颜色

php - 在主 div 循环中添加 3 div

css - 显示内联不适用于导航按钮

php - session 和 iframe

javascript - 如何动态调整vue组件中的文本大小

html - ASP.NET div 标签适合

javascript - 在进行 AJAX 调用后，我的 jQuery 函数消失了

css - 是否可以在移动设备的 HTML 电子邮件中使用 vw(视口(viewport)宽度)作为字体大小

Eclipse 导航快捷方式

jsf-2 - 如果已登录，则 JSF 2.0 重定向主页

©2024 IT工具网  联系我们