我试图在导航栏上将多个 a 标签彼此相邻对齐，但是每当我将它们对齐在中心时，它们就会彼此堆叠在顶部。我尝试了 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条经验 获得超15个赞
您目前已将 .navbar a 设置为 display: block。这会导致元素位于彼此下方。
保留元素'块属性但仍将它们并排显示，请将 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条经验 获得超8个赞
将 flex 与 justify-content: center 一起使用，并去掉包裹导航栏元素的双 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条经验 获得超6个赞
将 .navbar a 的显示规则更改为 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条经验 获得超5个赞
您可以使用 display: inline-block 使所有内容内联。
这里有一些示例 - 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 关注
- 80 浏览
添加回答
举报
0/150
提交
取消