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

Question

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

对于宽屏显示器，它可以与移动屏幕一起使用，但是对于纵向视图的 iPad，导航栏中的最后一部分会延伸到空间之外。

如何解决此问题，以便所有部分都保留在导航栏中？

见下文——

窄屏（iPad 纵向视图）

预期视图：

这是正在使用的 CSS：

style.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. 您可以减少锚标记上的填充设置。您目前每边有 10 像素，这等于每个锚标记的总和 20 像素。 #primary-menu ul li a {5px 5px}

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

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

4. 您可以综合以上所有方法。

Answer 2

您应该在 responsive-nav.css 中增加断点的大小。此外，em 单位不应用于断点的响应式设计，因为使用像素更自然，因为您的分辨率以像素为单位。例如，您应该使用 max-width: 960px 并将字体设置为 2em 以正确缩放它，因为 em 单位与元素的大小相关。

Answer 3

问题来自为导航中包含的锚定义的字段填充尝试在媒体查询中像这样减少它，断点也应该以像素为单位定义：

#primary-menu ul li a {
display: block;
padding: 5px 5px;
line-height: 23px;
text-decoration: none;
color: #0d234d;
}