个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 12:35:00 26 4
gpt4 key购买 nike

我是 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/

26 4 0
文章推荐： html - 如何设置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com