Html 导航栏全宽和下拉宽度问题

我有几个问题没有解决。第一个问题：

作为水平导航条，该部分需要跨越屏幕的整个宽度。在我的显示器上这一切都很好，但当我放大或调整浏览器宽度以显示水平滚动条时，导航条背景的长度将与浏览器的宽度相等。也就是说，无论大小或缩放如何，导航栏都将覆盖整个可见宽度，但向右滚动一点也会显示导航栏不会覆盖整个页面宽度

第二个问题与下拉功能有关。此时，宽度会自动调整为最长单词的宽度，即空格会导致单词断开到下一行。首先，我如何阻止这种情况，其次，是否可以将宽度调整为始终与主导航栏链接两侧边界之间的距离一样宽？编辑：忽略本段的第一部分。我不小心从CSS中删除了空白：nowrap。不过，第二部分仍然是一个问题

HTML:

还有，当我在做的时候，为什么我不能让边界与导航栏本身的高度完全相同？如果我增加填充，它会变成一个像素太长。如果我减少填充，它会变成一个像素太短

---

此外，如果您的浏览器在代码中需要前缀，请道歉。我用带前缀的CSS替换了一个为我做这件事的脚本。

问题1：我不能100%确定您在这里想要做什么，但您遇到的问题似乎来自以下方面：

.width{margin:0 auto;min-width:1000px;width:84%;}

将此行更改为以下内容可以解决您的问题，但如果您有意将宽度设置得更小，则可能会导致其他问题：

.width{margin:0 auto;min-width:1000px;background:#000;width:84%;}

---

问题2：我最近在回答了一个非常类似的问题：

对于你的第一期，我无法复制它，也许我误解了你

对于第二个问题，您可以使用以下css停止nav中链接的包装：

.nav a {
  //other styles
  white-space: nowrap;
}

---

我想我已经得到了你想要的：

HTML删除了边框li，因为下拉列表的父li必须是您希望下拉列表的全宽：

<nav class="bg">
<ul class="width nav">
    <li><a href="#">DropLink</a>
        <ul class="drop">
            <li><a href="#">LongerLinkName</a></li>
            <li><a href="#">LongLink WithSpace</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

---

具有讽刺意味的是，在你潜入之前，我离回答链接中的问题只有几秒钟了！所以我只是投了赞成票，发了牢骚，然后离开了！不管怎样，我现在注意到我的CSS，这就可以解释了。我一定是无意中删除了nowrap。尽管如此，第二部分的宽度问题仍然存在。至于第一个问题，是的，我不想删除最小宽度，因为它会弄乱页面内容。Hi Hiigaran:你能再看看我的答案吗。我已将其更新为保留在最小宽度。在100%宽度时仍然存在相同的问题。一旦它达到最小宽度并且水平滚动条启动，问题就发生了。width%和min width px组合的要点是在页面两侧保留一个空间，以容纳较大的显示器，但随着浏览器宽度、显示器大小或分辨率的降低，它会自动删除该空间，并最终使页面占据整个宽度，允许查看空间较小的人使用整个区域。Hiigaran，css中的问题是背景应用于导航。由于nav内部的元素比nav宽，因此仅部分显示背景。将背景色附加到您身上。应用于UL的宽度解决了您的问题。正如我所知，更改了什么？将最小宽度添加到.bg，将宽度和边框添加到nav UL li，显示：块，空白：nowrap添加到nav UL li和nav UL li a，最小宽度：100%；导航。我想就这样了。我会玩一会儿，只是为了理解它。nowrap和block绝对有效。明天我可能会汇报结果。谢谢你的帮助。不用客气：我意识到我根本没有解释我在做什么。定位的元素的宽度绝对基于其父元素，这就是为什么min width:100%使事物至少与父元素一样长。nowrap是非常不言自明的，块使下拉列表中的链接填满了整个可用空间，因此您的悬停状态覆盖了下拉列表的宽度。

.nav a {
  //other styles
  white-space: nowrap;
}

<nav class="bg">
<ul class="width nav">
    <li><a href="#">DropLink</a>
        <ul class="drop">
            <li><a href="#">LongerLinkName</a></li>
            <li><a href="#">LongLink WithSpace</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

* {margin: 0; padding: 0; font-size: small; vertical-align: middle;}
a {color: #F00; text-decoration: none;}
.width {margin: 0 auto; min-width: 1000px; width: 84%; }
.bg {min-width:1000px;}
.bg, .drop {background: #000;}
nav>ul {width: 100%; text-align: justify; font-size: 0; position: relative;}
nav>ul:after {content: ""; width: 100%; display: inline-block;}
nav ul li {border-right: 1px solid #555; list-style: none; display: inline-block;  position: relative; text-align:center; width:19%;}
nav ul li:first-child {border-left:1px solid #555;}
nav a {display: inline-block; background: rgba(0,0,0,0); transition: background 0.2s linear; padding: 8px;}
nav a:hover {background: rgba(0,0,255,1);}
.drop {position: absolute;left: -1000px;top: -1000px;opacity: 0;transition: opacity .5s, top 0 .25s, left 0 .25s;border-left: 1px solid #BBB;border-right: 1px solid #BBB;border-bottom: 1px solid #BBB;}
 .nav li:hover .drop {left: 0;top: 100%;opacity: 1;transition: opacity .5s, top 0s, left 0s;}
nav ul ul {min-width:100%;}
nav ul ul li,
nav ul ul li a {border:0;display:block;text-align:left;white-space:nowrap;width:auto;}