html - 导航栏全宽和下拉宽度问题

Question

我有几个问题无法解决。第一个问题:

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

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

Link to fiddle

HTML:

<nav class="bg">
    <ul class="width nav">
        <li><span class="bord"></span></li>
        <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><span class="bord"></span></li>
        <li><a href="#">Link</a></li>
        <li><span class="bord"></span></li>
        <li><a href="#">Link</a></li>
        <li><span class="bord"></span></li>
        <li><a href="#">Link</a></li>
        <li><span class="bord"></span></li>
        <li><a href="#">Link</a></li>
        <li><span class="bord"></span></li>
    </ul>
</nav>

CSS:

*{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,.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 li{list-style:none;display:inline-block;position:relative;}
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;}
.bord{border-left:1px solid #000;border-right:1px solid #555;padding:7px 0;}

此外，当我这样做时，为什么我无法使边框与导航栏本身的高度完全相同？如果我增加填充，它就会变成一个像素太长。如果我减少填充，它就会变得太短一个像素。

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

Answer 1

对于您的第一期，我无法复制它(也许我误解了您)。

对于您的第二期，您可以使用以下 css 停止在导航中环绕链接:

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