我正在尝试将
HTML5 / CSS3作为学习过程,但我正在努力创建一个导航栏,用于指向我页面中其他部分的链接.
我从找到的教程中调整了代码并且它可以工作,但只有在1080p的分辨率下查看时,如果宽度较小,则条形图包裹在其他线条上.
我从找到的教程中调整了代码并且它可以工作,但只有在1080p的分辨率下查看时,如果宽度较小,则条形图包裹在其他线条上.
无论用户使用什么分辨率,我如何确保导航栏只占用一行(缩小到适合)?
这是导航栏的CSS代码.请注意,在导航下我已将宽度设置为33.3%并填充相同以使按钮居中.我不知道这是不是原因.
nav { display:block; position: absolute; left:0; white-space:nowrap; margin: 0 auto; width: 33.3%; background-color:#ff6600; padding-left: 33.3%; padding-right: 33.3%; } nav ul { margin: 0 auto; width: 100%; list-style: none; display: inline; white-space:nowrap; } nav ul li { float: left; position: relative; white-space:nowrap; } nav ul li a { display: block; margin: 0 auto; width: 150px; font-size: 16px; font-family: century gothic; line-height: 44px; text-align: center; text-decoration: none; color:#575757; white-space:nowrap; } nav ul ul { width: 200px; position:absolute; top:-99999px; left:0; opacity: 0; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; z-index:497; background:#333; padding: 2px; border:1px solid #444; border-top:none; Box-shadow:#111 0 3px 4px; } nav ul ul li a { display: block; width: 200px; text-align: left; padding-left: 3px; font-size: 14px; } nav ul li:hover>ul{ opacity: 1; position:absolute; top:98%; left:0; } nav ul li a:hover { color: #fff; background-color: #cc3300 } nav ul li.selected a { color: #fff; background-color: #cc3300; }