html - 导航栏文本延伸到空间之外

Question

我对前端的了解不够流利，不知道如何解决这个问题，问题是在窄屏幕上，导航栏没有调整，所以所有的文本都保留在里面。

对于宽屏显示器，以及移动屏幕，它很好，但是对于纵向 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 -->

Answer 1

问题是组合导航元素的宽度比屏幕宽。造成这种情况的因素有几个:字体大小、边距和填充。

由于没有专门设置规则来告诉浏览器要做什么，所以通过将不适合的链接放在新行中来腾出空间。

您有多种选择来解决此问题。

1. 您可以减少 anchor 标记上的填充设置。您目前每边有 10px，这等于每个 anchor 标记总共有 20px。 #primary-menu ul li a {5px 5px}

2. 您可以减小字体大小，从而减小每个 anchor 标记的宽度。#primary-menu {font-size:1.6em}

3. 您可以减少无序列表的边距，以便 anchor 标记有更多空间。 #primary-menu ul {margin:0}

4. 您可以组合使用上述所有方法。