Question

我的网站有一个导航栏菜单，我想弄清楚如何消除每个导航栏链接之间的差距。据我所知，使用类下拉列表的li属性比链接的其余部分宽几个像素。我试图消除这个差距是不成功的。

以下是导航栏下拉菜单的代码（请注意，有一些链接属性链接到本地bootstrap js和css文件。如果要直接复制并粘贴我的代码，请相应调整。谢谢）：

<!DOCTYPE HTML>
<html>
<head>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'>
    <link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<style>
body {
    top: 50px;
    position: relative;
}

#mainNav {
    position: relative;
    top: 50px;
}
#mainNav .dropdown{
    display:inline;
    margin: 0;
    padding: 0;
}
.mainNavDD li{
    list-style-type: none;
}

.mainNavDD a{
    color: #524F4F;
    padding: 10px 20px 12px 20px;
    height: 100%;
}

.mainNavLink {
    border-right: 1px solid #d6d6d6;

    background: rgb(101,0,10); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(101,0,10,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(101,0,10,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(101,0,10,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(100%,rgba(101,0,10,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(101,0,10,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(101,0,10,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(101,0,10,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(101,0,10,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(101,0,10,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(101,0,10,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(101,0,10,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(101,0,10,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65000a', endColorstr='#65000a',GradientType=0 ); /* IE6-9 */                

}

#mainNav a:hover{
    color: #65000A;
}


ul .mainNavDD{
    padding: none;
}
.dropdown {
    width: 300px;
    position: relative;
    margin: 0 auto;
    top: -50px;

}

#brandMenu {
    width: 200px;
    background-color: #65000A;
    color: white;
    border: 1px solid #4F5153;
}

.dropdown-menu li a:hover{
    background-color: #65000A;
    color: white;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
}

.brandDD {
    float: right;
}

.dropdown-menu {
    min-width: 200px;
}

.dropdown-menu.columns-2 {
    min-width: 400px;
}

.dropdown-menu.columns-3 {
    min-width: 600px;
}

.dropdown-menu li a {
    padding: 5px 15px;
    font-weight: 300;
}

.multi-column-dropdown {

}

.multi-column-dropdown li a {
    display: block;
    clear: both;
    line-height: 1.428571429;
    color: #333;
    white-space: normal;
}

.multi-column-dropdown li a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

ul .multi-column-dropdown {
    padding: 10px;
}
</style>
</head>
<body>
    <div class="break"></div>
    <div id="mainNav" class="marginTop hidden-xs hidden-sm" style="margin: 0 auto;">
    <ul class="mainNavDD">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle mainNavLink" data-toggle="dropdown">Home</a>
        </li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle mainNavLink" data-toggle="dropdown">Skin Care</a>
            <ul class="dropdown-menu multi-column columns-2">
                <div class="row">
                    <div class="col-sm-6">
                        <ul class="multi-column-dropdown">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul class="multi-column-dropdown">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </div>
                </div>
            </ul>
        </li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle mainNavLink" data-toggle="dropdown">Hair Care</a>
            <ul class="dropdown-menu multi-column columns-2">
                <div class="row">
                    <div class="col-sm-6">
                        <ul class="multi-column-dropdown">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul class="multi-column-dropdown">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </div>
                </div>
            </ul>
        </li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle mainNavLink" data-toggle="dropdown">Bath &#38; Body</a>
            <ul class="dropdown-menu multi-column columns-2">
                <div class="row">
                    <div class="col-sm-6">
                        <ul class="multi-column-dropdown">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <ul class="multi-column-dropdown">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </div>
                </div>
            </ul>
        </li>
      </ul>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

感谢您的帮助！

Answer 1

这里有一个解决方案，而不是这个：

#mainNav .dropdown{
    display:inline;
    margin: 0;
    padding: 0;
}

改为：

#mainNav .dropdown{
    float:left; /* new */
    width:auto; /* new */
    margin: 0;
    padding: 0;
}

不确定您在第一个width:500px上需要li的原因，所以我删除了上面使用的width:auto必须与!important一起使用（不建议）

这是Fiddle（展开窗口以查看菜单）

Answer 2

尝试css：

.navbar-header{
    margin: 0px 0px;
    padding: 0px 0px;
}

Answer 3

快速破解是为项目添加负边距。

#mainNav .dropdown:not(:first-child) {
  margin-left: -5px;
}

Bootply

Navbar without space

Answer 4

最容易修复：

#mainNav .dropdown {
    float: left;
    margin: 0;
    padding: 0;
}

然后在.dropdown选择器中，移除width: 300px;。

消除导航栏选项之间的差距

4 个答案: