[英]list menu element place them side-by-side
我試圖使我的無序列表元素並排坐在導航菜單欄上。
問題:
以下是我的嘗試,有人可以發現我哪里出問題了嗎? 非常感激。
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nav">
<h1 class="logo">LogoHere</h1>
<ul class="nav-menu">
<li>Action</li>
<li>Who we are?</li>
<li>Blog</li>
<li>Services</li>
<li>Get in touch</li>
</ul>
</div>
</body>
</html>
CSS:
.nav{
background-color: #2EC0FE;
opacity: 0.75;
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
background-image: -o-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
background-image: -moz-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
background-image: -webkit-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
background-image: -ms-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
background-image: linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
height: 100px;
width: 100%;
margin-top: 600px;
}
.logo{
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 54px;
line-height: 40px;
letter-spacing: -5px;
color: white;
margin: 0 0 0 0;
padding-top: 25px;
padding-left: 25px;
font-weight: 100;
}
.nav-menu
{
list-style-type: none;
display: inline;
text-align: center;
font-size: 20px;
color: white;
padding: 0px;
margin-top: 0px;
}
圖像問題3:這是當窗口未全屏顯示時,這只是我要定位導航欄的方式
接下來是全屏顯示時,您可以看到背景圖像已擴展,現在導航欄的位置比我希望它在第一幅圖像中的位置高得多。
第一項:
display: inline;
到.nav-menu li
而不是.nav-menu
。 h1
(其他標題標簽也是如此)是一個block
元素。 要與菜單在同一行display: inline-block;
,請添加display: inline-block;
logo
。 第二項:
body
具有邊距。 因此,要使nav
欄占據整個空間,您必須在CSS上添加body {margin: 0;}
。 第三項:
position: absolute; bottom: 0px;
position: absolute; bottom: 0px;
.nav
類。 這會將條形圖放在底部。 涵蓋以上所有三個項目的工作演示 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.