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

我有我的网站的导航栏菜单，我想弄清楚如何删除每个导航栏链接之间的差距。据我所知，班级下拉的li属性比链接的其余部分宽几个像素。我试图消除这种差距一直没有成功。删除导航栏选项之间的差距

下面是导航栏下拉菜单的代码（请注意，有些链接属性会链接到本地引导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>

谢谢你的帮助！

来源

2015-06-21 xCasper

这里是你的解决方案，而不是这样的：

#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有t与!important使用O（不建议）

这里是一个Fiddle（扩大窗口来查看菜单）

来源

2015-06-21 05:02:42 dippas

这工作得很好，并且稍微好一点，然后下面的-5px黑客。这就是为什么这一个被标记为答案 – xCasper

很高兴我可以帮助;） – dippas

尝试CSS：

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

来源

2015-06-21 04:48:17

我不使用navbar-header作为任何类的类。因为在实际网站上，我在屏幕顶部有一个导航栏，然后这个导航栏在页面 – xCasper

中较低.navbar-header是一个假类，把实际的类放在那里。你想让我编辑吗？ – 2015-06-21 04:52:18

好的。我试过你的CSS，它似乎没有任何影响。问题似乎是下拉班。 – xCasper

快速黑客是阴性切缘添加到项目。

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

Bootply

Navbar without space

来源

2015-06-21 05:08:33

这将工作，我需要什么，谢谢你！ – xCasper

欢迎卡斯帕尔！ :)是的，迪帕斯答案更好。你需要调整-5px的值来满足你的需求。 –

最简单的解决办法：

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

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

来源

2015-06-21 05:59:32

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

回答

相关问题