我正試圖在導航欄上工作。我無法將無序列表放置在導航欄中以將其放置在標題底部。我嘗試使用隱藏的溢出並且還使用填充移動它。仍然沒有運氣。我該怎麼做?在此如何將無序列表放置在標題div內的導航欄div中?
body{
\t height:100%;
\t margin: 0;
\t background-color:#cccccc;
}
#container{
\t width:100%;
\t height:auto;
}
#header{
\t width:100%;
\t height:50px;
\t background-color:white;
\t margin: auto;
}
.logo{
\t font-weight:bold;
\t width:8%;
\t height:20px;
\t float:left;
\t font-size: 20px;
}
.navbar{
\t width:75%;
\t height:40px;
\t margin: auto;
\t
}
.navbar ul{
\t list-style-type: none;
\t margin:0;
\t padding:0;
\t height:20px;
\t width:18%;
}
.navbar li{
\t float:left;
\t padding-right:10px;
\t display:block;
}
li a{
\t
\t font-size:18px;
\t font-family:tahoma;
\t font-weight:italic;
\t text-decoration:none;
}
li a:hover{
\t text-decoration:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>test2</title>
\t <link rel="stylesheet" href="default.css">
</head>
<body>
\t <div id="container">
\t \t <div id="header">
\t \t \t <div class="logo">Hello</div>
\t \t \t
\t \t \t <div class="navbar">
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#news">News</a></li>
\t \t \t \t \t <li><a href="#about">About</a></li>
\t \t \t \t \t <li><a href="#contact">Contact</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
</html>
除去
float:left
刪除'寬度:從'.navbar ul' –「18%'將其定位在底部的標題「 - 所以,你需要顯示下面的標誌? – UncaughtTypeError
您刪除18%寬度解決了問題。謝謝。感謝所有回答的人。 – jonmo1990