HTML Div沒有出現在導航欄中
[英]HTML Div not appearing in nav bar
問題描述
我試圖在我的網站頂部創建一個導航欄，並且出現我的徽標，但是當我嘗試向左浮動時，“ home”卻沒有。 我究竟做錯了什么？
當我將站點縮小到最小時，它會出現在徽標的左側，但我希望它位於右側。
<html>
<head>
</head>
<style>
body{
margin: 0px;
padding: 0px;
}
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
#logo-item{
float: left;
margin-left: 90px;
padding-top: 10px;
}
.menu-item{
float: left;
margin-top: -28px;
font-size: 110%
margin-right: 20px;
font-color: white;
}
.topBarItems{
}
</style>
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
</html>
3 個解決方案
解決方案1
0 2016-04-26 02:55:21
該HTML存在一些問題
- 首先，您需要在head和body標簽之間放置style標簽，它應該放在head標簽內-這可能會導致奇怪的行為，或者根本無法使用，具體取決於瀏覽器
- 您正在使用-28px的邊距，這將有效地將內部div移動到外部div上方，從而使它不可見（因為它位於可見頁面上方）。
- font-color應該是color
解決方案2
0 已采納 2016-04-26 02:55:29
這是您的代碼，進行了一些編輯：
<body>
<div id="topBar">
<img id="logo" class="menu-item logo-item" src="backflip-logo.png"><!-- Updated the class -->
<div class="menu-item">HOME</div><!-- Updated the tag placement to fall within top bar -->
</div>
</body>
還對CSS進行了一些編輯：
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
.logo-item{
float: left;
margin-left: 90px;
}
.menu-item{
padding-top: 10px;
float: left;
font-size: 110%
margin-right: 20px;
color: #ffffff;
}
.topBarItems{
}
但是，您可能只是想使用Bootstrap之類的框架，而不是從頭開始做所有事情： http : //getbootstrap.com
這是一個小提琴： https ： //jsfiddle.net/windrunn3r1990/fck4zsue/
解決方案3
0 2016-04-26 03:19:24
您可以使用display:inline-block;解決問題display:inline-block; 而不是浮動組件。 https://jsfiddle.net/oxycm856/
的HTML
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
的CSS
#topBar{
width:100%;
background-color:#242424;
height: 63px;
}
#logo-item, .menu-item{
display:inline-block;
color:#fff;
}
CSS HTML <a> </a> 導航欄中顯示的標簽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.