如何製作我的導航欄更薄？

有誰知道如何更改導航欄，使得文本上方/下方的空白空間更少。我已經嘗試創建一個負面的緩衝區，但似乎並沒有工作。如何製作我的導航欄更薄？

此外，如果有人知道如何將導航欄更改爲按鈕（通常是移動網站），以便它不佔用頁面的整個高度，這將是有用的。

.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

如何製作我的導航欄更薄？

回答

相關問題