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（删除了边框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：

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

Navbar全宽＆amp;下拉宽度问题

3 个答案: