Navbar全寬和下拉寬度問題

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

問題1：我不是100％肯定你正在尋找在這裏做什麼，而是你遇到的問題似乎從下面幹：

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

更改該行以下解決您的問題，但如果你有故意設置寬度可能會引入其他問題較小：

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

問題2：我最近回答了一個非常類似的問題在：Li element breaking content even with display block

Answer 2

對於你的第一個問題，我無法複製它（也許我誤解了你）。

對於你的第二個問題，您可以停止鏈接的包裝與下面的CSS的資產淨值：

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

Answer 3

我想我已經得到了你以後：

HTML（刪除邊境李是因爲下拉菜單的家長裏必須是你想要的下拉菜單是全寬）：

<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：

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