如何制作我的导航栏更薄？

有谁知道如何更改导航栏，使得文本上方/下方的空白空间更少。我已经尝试创建一个负面的缓冲区，但似乎并没有工作。如何制作我的导航栏更薄？

此外，如果有人知道如何将导航栏更改为按钮（通常是移动网站），以便它不占用页面的整个高度，这将是有用的。

.navbar-nav>li { 
 
    float: none; 
 
} 
 
.navbar-default { 
 
    background-color: rgba(255, 255, 255, 0); 
 
    border-width: 0px; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    background-color: rgba(150, 155, 155,); 
 
} 
 
.navbar { 
 
    margin-bottom: 0 !important; 
 
}

<meta content="width=device-width, initial-scale=1" name="viewport"> 
 

 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
 
    </script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 
 
    </script> 
 
    <link href="Calums2.css" rel="stylesheet"> 
 
    <link href="navbar.css" rel="stylesheet"> 
 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> 
 
<body> 
 

 
<div class="list" style="Position: absolute; top: 0px; left:0px;"> 
 
     <div class="navbar navbar-default"> 
 
      <nav class="navbar navbar-default"> 
 
      <ul class="nav nav-justified navbar-nav"> 
 
     <li><a href="Home.html"><h2>Home</h2></a></li> 
 
     <li><a href="team.html"><h2>Team</h2></a></li> 
 
     <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li> 
 
     <li><a href="Blog.html"><h2>Blog</h2></a></li> 
 
     <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li> 
 
       </ul> 
 
       </div> 
 
     </nav> 
 
     <style> 
 
     text-align:justify; 
 
     </style> 
 
     </div> 
 
    </div> 
 

 
</body>

来源

2016-01-12 Magnus Nicoll

你的结构HTML代码也是无效的。 –

正如Maihan所说，您的HTML代码存在一些问题，它们会阻止简单且经过测试的答案，而无需为您重新编写HTML代码。像约翰内斯这样的答案应该可以工作，但说实话，这个空间在你包含的图像中看起来很完美，我会这样离开它。 – dotcomly

这将做到这一点。

ul.nav li a>h2 { 
    margin-top: 0; 
    margin-bottom: 0; 
}

这里有一个小提琴：https://jsfiddle.net/ypfhs1gn/1/

此外，为了解决您的HTML：

<div class="list" style="Position: absolute; top: 0px; left:0px;"> 
    <div class="navbar navbar-default"> 
    <nav class="navbar navbar-default"> 
     <ul class="nav nav-justified navbar-nav"> 
     <li><a href="Home.html"><h2>Home</h2></a></li> 
     <li><a href="team.html"><h2>Team</h2></a></li> 
     <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li> 
     <li><a href="Blog.html"><h2>Blog</h2></a></li> 
     <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li> 
     </ul> 
    </nav> 
    </div> 
</div>

UPDATE：此外，下面的小提琴更新以获得您的菜单按钮：https://jsfiddle.net/ypfhs1gn/2/

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav nav-justified navbar-nav"> 
     <li><a href="Home.html"><h2>Home</h2></a></li> 
     <li><a href="team.html"><h2>Team</h2></a></li> 
     <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li> 
     <li><a href="Blog.html"><h2>Blog</h2></a></li> 
     <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav>

来源

2016-01-12 02:04:10

我想尝试含有顶部/底部边缘和/或填充的设置设置一个CSS规则nav > ul，从0开始，并（如果具有的效果）然后将其更改为您喜欢的值。

来源

2016-01-12 01:58:37 Johannes

如何制作我的导航栏更薄？

回答

相关问题