我正在嘗試調整導航欄上的 1 張圖片、主頁鏈接、標簽鏈接和登錄按鈕，我可以做些什么來糾正它，因為正在發生以下問題，如圖所示。下面是 html 和 css 代碼。我希望導航欄看起來像 stackoverflow [
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="bar">
<img src="background.png" class="pic">
<nav>
<ul class="navlist">
<li><a href='#' class="link1">Search</a></li>
<li><a href='#' class="link1">Browse</a></li>
<li><a href='#' class="link1">Tags</a></li>
<li><a href='#' class="link1">Filter</a></li>
<li><a href='#' class="link1">Dev</a></li>
</ul>
</nav>
<div class="signin"><a href="#" class='sign'>Sign In</a</div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px
}
.navlist{
list-style: none ;
display: flex ;
background: red ;
padding: 0px ;
margin: 0px auto ;
width: 477px ;
top: 55px ;
position: relative;
}
.bar{
height:100px ;
justify-content: center ;
box-shadow: 0px 2px 5px
}
.link1{
margin-left: 30px;
text-decoration: none ;
color: black ;
font-size: 20px
}
.signin{
background:blue ;
height: 35px ;
width: 100px ;
left: 950px ;
position: relative;
text-align: center ;
font-size: 18px ;
border-radius: 15% ;
}
.sign{
top: 15% ;
position: relative;
color: white ;
text-decoration: none
}
ps：navlist div的紅色背景只是為了查看margin的范圍
uj5u.com熱心網友回復：
您可以做的是創建一個表格，在其中創建一行并將所有這些元素添加到同一行的不同單元格中。但如果您想發布您的網頁，則不建議這樣做。我在這里推薦的是使用display: grid;
你需要在 w3schools 上查看 CSS 網格的檔案。但是，如果您已經了解它，下面是它的作業原理 (CSS)：
.bar{
display: grid;
grid-template-columns: 100px auto 80px;
height: auto;
}
你就完成了。現在您只需要垂直對齊專案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/406665.html
標籤：