导航栏文本延伸到 space 之外

Question

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

对于宽屏显示器和移动屏幕，它很好，但是在纵向视图中 iPad 导航栏的最后一部分延伸到 space 之外。

如何解决这个问题，使所有部分都保留在导航栏内？

见下文—

窄屏（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;
}

响应式-nav.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

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

Answer 2

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

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

Answer 3

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

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

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

您可以减少锚标记上的填充设置。您目前每边有 10px，这等于每个锚标记总共有 20px。 #primary-menu ul li a {5px 5px}
您可以减小字体大小，从而减小每个锚标记的宽度。#primary-menu {font-size:1.6em}
您可以减少无序列表的边距，以便锚标记有更多空间。 #primary-menu ul {margin:0}
您可以组合使用以上所有方法。

导航栏文本延伸到 space 之外

Navbar text extends outside of the space

html

css

navbar