如何将多个 a 标签彼此对齐？
我试图在导航栏上将多个 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>
猛跑小猪浏览 176回答 4
4回答
-
侃侃尔雅
您目前已将 .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
将 flex 与 justify-content: center 一起使用，并去掉包裹导航栏元素的双 divbody { 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
将 .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
您可以使用 display: inline-block 使所有内容内联。这里有一些示例 - https://www.w3schools.com/css/css_display_visibility.aspbody { 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>
随时随地看视频慕课网APP
相关分类
Html5