在HTML / CSS中更改导航链接之间的间距
在HTML / CSS中更改导航链接之间的间距
提问于 2020-06-10 12:46:01
我想减少我的链接之间的空间，用于左侧的导航。我试过padding，但它弄乱了我的float。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>projekt</title>
</head>
<body>
<header>
<nav>
<ul>
<li class="home"><a href="index.html">home</a></li>
<li class="nav"><a href="contact.html">contact</a></li>
<li class="nav"><a href="list.html">list</a></li>
<li class="nav"><a href="office.html">office</a></li>
<li class="nav"><a href="projects.html">projects</a></li>
<li class="nav"><a href="plans.html">plans</a></li>
</ul>
</nav>
</header>
<div class="navline"></div>
</body>
</html>CSS：
body{
margin: 0;
padding: 0;
}
nav ul{
margin: 0;
padding: 0;
font-family: proxima-n-w01-reg,sans-serif;
list-style-type: none;
}
.navline
{
border-bottom:1px solid rgb(226, 223, 223);
padding-bottom:80px
}
nav li.home{
display: flex;
margin: 30px 0 0 160px;
float: left;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
nav li.nav{
display: flex;
margin: 30px 100px 0 0px;
float: right;
font-size: 18px;
}
nav li a{
display: flex;
text-decoration: none;
color: black;
}我不应该使用float来将导航定位在左侧和右侧，而应该使用display:flex来减少空间吗？
解决方案如下：
plans projects office ....但它更像是这样：
plans projects office...Stack Overflow用户
发布于 2020-06-10 13:02:11
你必须减小页边距的大小。
nav li.nav{
display: flex;
margin: 30px 20px 0 0px;
float: right;
font-size: 18px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62296042
复制相关文章
相似问题
腾讯云开发者
