html - 我的对齐项目中心不起作用。为什么?
问题描述
我的标题有问题。无论我做什么,我的导航链接都不会进入中心。这是代码。谁能告诉我为什么它不起作用?
body {
background-color: black;
color: #6e07a6;
font-size: 16px;
font-family: 'Poppins', sans;
font-weight: 400;
}
.header-part {
width: 100%;
height: 5rem;
background-color: #6e07a6;
color: white;
margin: 0;
padding: 0;
top: 0;
}
.nav-links {
display: flex;
list-style: none;
text-decoration: none;
justify-content: space-evenly;
align-items: center;
}
<div class="header-container">
<div class="header-part">
<header id="header">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">Projects</li>
<li class="nav-link">Contact</li>
<li class="nav-link"><span class="sign-in">Sign in / Login</span></li>
</ul>
</header>
</div>
</div>
<div class="main-page"></div>
解决方案
body {
background-color: black;
color: #6e07a6;
font-size: 16px;
font-family: 'Poppins', sans;
font-weight: 400;
}
.header-part {
width: 100%;
height: 5rem;
background-color: #6e07a6;
color: white;
margin: 0;
padding: 0;
top: 0;
display: flex;
align-items: center;
}
#header {
display: flex;
align-items: center;
width: 100%;
}
.nav-links {
display: flex;
list-style: none;
text-decoration: none;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test site</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="header-container">
<div class="header-part">
<header id="header">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">Projects</li>
<li class="nav-link">Contact</li>
<li class="nav-link"><span class="sign-in">Sign in / Login</span></li>
</ul>
</header>
</div>
</div>
<div class="main-page">
</div>
</body>
</html>
我为包裹元素设置了显示类型,并定义了它们的宽度以填充紫色区域。默认情况下,它们设置为显示:块;
推荐阅读
- c++ - gmock - 在不同的方法中为具有相同参数的相同对象设置期望
- python - docker-compose: ValueError: bad marshal data (unknown type code)
- asp.net - 数据插入成功后将信息打印到另一页
- azure - Azure 映像构建 - azure-arm:无法删除托管映像
- django - 更改通过熊猫创建的 html 表上的列名
- bash - 在 Mac OS 终端中按设定的时间批量更改文件创建日期
- react-native - 从商店响应本机自动更新
- audio - FFmpeg - 音频标签 | 加利西亚语
- azure - 将数据从 Azure 表存储迁移(和转换)到 Cosmos DB Sql API 的最佳方式
- apache-poi - Apache POI docx:HTML 作为带有照片的 altChunk