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

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;
}

响应-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

问题是组合导航元素的宽度比屏幕宽。导致这种情况的因素有很多：字体大小，边距和填充。

由于没有专门设置规则来告诉浏览器该做什么，所以通过将不适合的链接放到新行上来制作空间。

您有几种方法可以解决此问题。

1. 您可以减少锚标记上的填充集。您目前每侧有10px，相当于每个锚标签总共20px。 #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;
}