我对前端的了解不够流利,不知道如何解决这个问题,问题是在窄屏幕上,导航栏没有调整,所以所有的文本都保留在里面。
对于宽屏显示器,以及移动屏幕,它很好,但是对于纵向 View 的 iPad,导航栏中的最后一部分延伸到空间之外。
如何解决此问题,使所有部分都保留在导航栏内?
见下文—
窄屏(iPad 纵向 View )
预期观点:
这是正在使用的 CSS:
样式.css
#primary-menu {
background: #dbdddd;
height: 33px;
font-family: 'francois one', 'arial narrow', 'arial', sans-serif;
/*font-family: 'Oswald', sans-serif;*/
font-size: 1.8em;
position: relative;
width: 100%;
z-index: 5;
}
#primary-menu ul {
margin: 0 20px 0 10px;
padding: 0;
list-style: none;
}
#primary-menu ul li {
display: inline-block;
text-transform: uppercase;
position: relative;
}
#primary-menu ul li a {
display: block;
padding: 5px 10px;
line-height: 23px;
text-decoration: none;
color: #0d234d;
}
#primary-menu ul li a:hover {
background: #e6e7e8;
}
#primary-menu ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 180px;
background: #dbdddd;
}
#primary-menu ul li:hover ul {
display: block;
z-index: 10;
}
#primary-menu ul ul li {
display: block;
}
响应导航.css
.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}
.nav-collapse li {
/*width: 100%;*/
display: block;
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
@media screen and (max-width: 40em) {
#primary-menu {
min-height: 33px;
height: auto;
}
.nav-collapse li {
width: 100%;
}
}
HTML
<div id="primary-menu" class="menu-primary-container">
<ul id="menu-primary" class="nav-menu">
<li id="" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3045">
<a href="">Home</a></li>
<li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3047">
<a href="">Fight Schedule</a></li>
{#<li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3047">#}
{#<a href="">Articles</a></li>#}
<li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3048">
<a href="">Boxing Predictions</a></li>
<li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3049">
<a href="">Boxing Score Analysis</a></li>
<li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3049">
<a href="">KTFO Videos</a></li>
</ul>
</div><!-- end Menu bar -->
最佳答案
问题是组合导航元素的宽度比屏幕宽。造成这种情况的因素有几个:字体大小、边距和填充。
由于没有专门设置规则来告诉浏览器要做什么,所以通过将不适合的链接放在新行中来腾出空间。
您有多种选择来解决此问题。
您可以减少 anchor 标记上的填充设置。您目前每边有 10px,这等于每个 anchor 标记总共有 20px。
#primary-menu ul li a {5px 5px}
您可以减小字体大小,从而减小每个 anchor 标记的宽度。
#primary-menu {font-size:1.6em}
您可以减少无序列表的边距,以便 anchor 标记有更多空间。
#primary-menu ul {margin:0}
您可以组合使用上述所有方法。
关于html - 导航栏文本延伸到空间之外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29188974/