我試圖在導(dǎo)航欄上將多個 a 標(biāo)簽彼此相鄰對齊，但是每當(dāng)我將它們對齊在中心時，它們就會彼此堆疊在頂部。我嘗試了 disply: flex;但這將文本左對齊body { overflow-x: hidden;}.navbar { background-color: #ffffff; border-bottom: 2px solid #000000; margin: 0px -2000px; padding: 0px 2000px;}.cent { text-align: center; } .navbar a { display: block; color: #000000; padding: 14px; text-decoration: none; } <html> <head> <title>entertainment</title> <link rel="stylesheet" href="entertainment.css"> <script src="entertainment.js"></script> </head> <body> <div class="navbar"> <div class="cent"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> </div> </body> </html>
4 回答
侃侃爾雅
TA貢獻1801條經(jīng)驗 獲得超16個贊
您目前已將 .navbar a 設(shè)置為 display: block。這會導(dǎo)致元素位于彼此下方。
保留元素'塊屬性但仍將它們并排顯示，請將 block 替換為 inline-block。這是工作代碼片段：
body {
overflow-x: hidden;
}
.navbar {
background-color: #ffffff;
border-bottom: 2px solid #000000;
margin: 0px -2000px;
padding: 0px 2000px;
}
.cent {
text-align: center;
}
.navbar a {
/* This is what changed */
display: inline-block;
color: #000000;
padding: 14px;
text-decoration: none;
}
<html>
<head>
<title>entertainment</title>
<link rel="stylesheet" href="entertainment.css">
<script src="entertainment.js"></script>
</head>
<body>
<div class="navbar">
<div class="cent">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</div>
</body>
</html>
MMMHUHU
TA貢獻1834條經(jīng)驗 獲得超8個贊
將 flex 與 justify-content: center 一起使用，并去掉包裹導(dǎo)航欄元素的雙 div
body {
overflow-x: hidden;
}
.navbar {
background-color: #ffffff;
border-bottom: 2px solid #000000;
margin: auto 0;
display: flex;
justify-content: center;
}
.cent {
text-align: center;
}
.navbar a {
display: block;
color: #000000;
padding: 14px;
text-decoration: none;
}
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
慕妹3242003
TA貢獻1824條經(jīng)驗 獲得超6個贊
將 .navbar a 的顯示規(guī)則更改為 inline-block;
.navbar a {
display: inline-block;
}
body {
overflow-x: hidden;
}
.navbar {
background-color: #ffffff;
border-bottom: 2px solid #000000;
margin: 0px -2000px;
padding: 0px 2000px;
}
.cent {
text-align: center;
}
.navbar a {
display: inline-block;
color: #000000;
padding: 14px;
text-decoration: none;
}
<html>
<head>
<title>entertainment</title>
<link rel="stylesheet" href="entertainment.css">
<script src="entertainment.js"></script>
</head>
<body>
<div class="navbar">
<div class="cent">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</div>
</body>
</html>
RISEBY
TA貢獻1856條經(jīng)驗 獲得超5個贊
您可以使用 display: inline-block 使所有內(nèi)容內(nèi)聯(lián)。
這里有一些示例 - https://www.w3schools.com/css/css_display_visibility.asp
body {
overflow-x: hidden;
}
.navbar {
background-color: #ffffff;
border-bottom: 2px solid #000000;
margin: 0px -2000px;
padding: 0px 2000px;
}
.cent {
text-align: center;
}
.navbar a {
display: inline-block;
color: #000000;
padding: 14px;
text-decoration: none;
}
<html>
<head>
<title>entertainment</title>
<link rel="stylesheet" href="entertainment.css">
<script src="entertainment.js"></script>
</head>
<body>
<div class="navbar">
<div class="cent">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
</div>
</body>
</html>
- 4 回答
- 0 關(guān)注
- 262 瀏覽
添加回答
舉報
0/150
提交
取消