CSS:使用CSS在标题中对齐菜单

我正在尝试制作一个标头。我有四个菜单项，我需要它们在菜单上以相等的间隔对齐。

JSFiddlelink<script async src="//jsfiddle.net/SM079/xdhu0kr2/1/embed/"></script>

收割台在屏幕中的90%与中心对齐
无论屏幕分辨率如何，标题链接都需要以相等的距离对齐

请帮助

您可以将其添加到.topnav类中

display: flex;
align-items: center;
justify-content: center;

Use可以使用flexbox属性以相等的间隔在菜单中对齐菜单项。只需要更改.topnav类中的css即可。像这样：


.topnav {
overflow: hidden;
background-color: black;
display:flex;
justify-content : space-between;
}

工作代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: black;
display: flex;
justify-content: space-between;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>

</body>
</html>

希望这就是你想要的样子。

要在屏幕中居中显示文本，请使用此

.topnav {
overflow: hidden;
background-color: black;
justify-content: center;
align-items: center;
display: flex;
}

然后要配置标题链接之间的空间，您可以使用此

a{
margin-left: 2rem;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: black;

padding:0 5%;/*It is better to use container*/
display:flex;
justify-content:space-evenly;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</body>
</html>

相关内容

最新更新

热门标签：