在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...回答 3
Stack Overflow用户
发布于 2020-06-10 12:56:09
尝试更改CSS文件，这是导航栏的示例css文件。您可以在css文件中为特定类添加缺少的属性。这将解决您的目的。
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}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用户
发布于 2020-06-10 13:11:44
在li上添加display:flex是没有意义的。从逻辑上讲，我会说这个li的css代码是不正确的。改为这样修改您的css：
nav ul{
margin: 30px 0 0 0;
padding: 0;
font-family: proxima-n-w01-reg,sans-serif;
list-style-type: none;
display: flex;
justify-content: space-evenly; /* You may also play around this css attribute for evenly distributed spacing instead of applying margin or so on li tag */
}
nav ul > li{
margin: 0 10px; /* You may change this spacing as per your need */
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
nav ul > li > a{
display: block;
}我通常会建议在ul上应用margin-top，而不是单独的li，但这也取决于您。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62296042
复制相关文章
相似问题
腾讯云开发者
