如何將導航欄放在標題內？

如何在導航頭內定位導航欄？如果我浮動的頭部內的div它工作正常。但是，當我刪除浮動導航欄位置標題下的位置。我不明白這一點。我如何解決它？如何將導航欄放在標題內？

html{ 
 
    height:100%; 
 

 
} 
 
body{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: grey; 
 
    height:100%; 
 
    width:100%; 
 

 
} 
 
#container{ 
 
    height:90%; 
 
    width:90%; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
    border-style: solid; 
 

 
} 
 
#header{ 
 
    height:8%; 
 
    width:100%; 
 

 
} 
 
.logo{ 
 
    height:80%; 
 
    width:10%; 
 
} 
 
.nav{ 
 
    height:90%; 
 
    width:75%; 
 
    margin:auto; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>basic</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
    <div id="container"> 
 
     <div id="header"> 
 
     <div class="logo"> 
 
     </div> 
 
      <div class="nav"> 
 
       <a href=""></a> 
 
       <a href=""></a> 
 
       <a href=""></a> 
 
       <a href=""></a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-05-26 jonmo1990

bydefault div元件是塊標籤元件就是它需要100％的寬度。您可以使用float，inline-block將其更改爲「內聯」元素。 > BR /> 檢查更新下面

html { 
 
    height:100%; 
 
} 
 
body{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: grey; 
 
    height:100%; 
 
    width:100%; 
 
} 
 
#container{ 
 
    height:90%; 
 
    width:90%; 
 
    margin-left: 5%; 
 
    margin-right: 5%; 
 
    border-style: solid; 
 
} 
 
#header{ 
 
    height:8%; 
 
    width:100%; 
 
} 
 
.logo{ 
 
    height:80%; 
 
    width:10%; 
 
    display: inline-block; 
 
} 
 
.nav{ 
 
    height:90%; 
 
    width:75%; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
     <div class="logo">logo</div> 
 
     <div class="nav"> 
 
      <a href="">Nav1</a> 
 
      <a href="">Nav2</a> 
 
      <a href="">Nav3</a> 
 
      <a href="">Nav4</a> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-05-26 08:37:45

片斷如果你讓標識位置：絕對它不會推低導航欄。您必須指定heigth和width，因爲它不會與父div進行比較。

.logo{ 
    height:40px; 
    width:100px; 
    position: absolute; 
}

解決這個問題的另一種方法是給導航欄留下一個小小的空白。這樣您就不必指定徽標的寬度和高度。

.nav{ 
    height:90%; 
    width:75%; 
    margin:-35px auto; 
}

來源

2017-05-26 08:54:09 Keutelvocht

如何將導航欄放在標題內？

回答

相關問題