我想在“主页”、“关于”和其他按钮之间添加更多空间。至少约5px。这是我的 HTML 和 CSS 代码：.custom-padding{ padding-top: 25px; } nav { border-radius: 20px; background: #ededf1; box-shadow: 5px 5px 10px #8e8e91, -5px -5px 10px #ffffff; position: relative; width: calc(100% - 60px); margin: 0 auto; padding: 10px; z-index: 1; text-align: right; padding-right: 2%; } .menu-area li { display: inline-block; border-radius: 10px; background: #ededf1; box-shadow: 3px 3px 5px #8e8e91, -3px -3px 5px #ffffff; } .menu-area a { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: bold; text-decoration: none; color: #8c93a4; letter-spacing: 1px; text-transform: capitalize; display: block; padding: 0 30px; font-size: 15px; line-height: 30px; position: relative; z-index: 1; }<html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css"> <title> some title </title> </head> <body > <div class="custom-padding"> <nav> <div class="logo">Form</div> <ul class="menu-area"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> </ul> </nav> </div> </body></html>
4 回答
千巷猫影
TA贡献1829条经验 获得超7个赞
您应该添加：
.menu-area li{margin: 0 5px";}如果按钮变大，只需减少链接的填充，例如：
.menu-area li a{padding: 0 20px;}
尚方宝剑之说
TA贡献1788条经验 获得超4个赞
您所需要的只是保证金。我不知道你为什么不这样做。
.menu-area li {
display: inline-block;
border-radius: 10px;
background: #ededf1;
box-shadow: 3px 3px 5px #8e8e91, -3px -3px 5px #ffffff;
margin: 0px 5px; // right, left margin of five
}
让我们简单一点。使用 .
.custom-padding{
padding-top: 25px;
}
nav {
border-radius: 20px;
background: #ededf1;
box-shadow: 5px 5px 10px #8e8e91,
-5px -5px 10px #ffffff;
position: relative;
width: calc(100% - 60px);
margin: 0 auto;
padding: 10px;
z-index: 1;
text-align: right;
padding-right: 2%;
}
.menu-area li {
display: inline-block;
border-radius: 10px;
background: #ededf1;
box-shadow: 3px 3px 5px #8e8e91,
-3px -3px 5px #ffffff;
}
.menu-area a {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-decoration: none;
color: #8c93a4;
letter-spacing: 1px;
text-transform: capitalize;
display: block;
padding: 0 30px;
font-size: 15px;
line-height: 30px;
position: relative;
z-index: 1;
}
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>
some title
</title>
</head>
<body >
<div class="custom-padding">
<nav>
<div class="logo">Form</div>
<ul class="menu-area">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</div>
</body>
</html>
Codepen：https: //codepen.io/marchmello/pen/BaNGyVo
或使用margin.
.custom-padding{
padding-top: 25px;
}
nav {
border-radius: 20px;
background: #ededf1;
box-shadow: 5px 5px 10px #8e8e91,
-5px -5px 10px #ffffff;
position: relative;
width: calc(100% - 60px);
margin: 0 auto;
padding: 10px;
z-index: 1;
text-align: right;
padding-right: 2%;
}
.menu-area li {
display: inline-block;
border-radius: 10px;
background: #ededf1;
box-shadow: 3px 3px 5px #8e8e91, -3px -3px 5px #ffffff;
margin: 0px 5px;
}
.menu-area a {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-decoration: none;
color: #8c93a4;
letter-spacing: 1px;
text-transform: capitalize;
display: block;
padding: 0 30px;
font-size: 15px;
line-height: 30px;
position: relative;
z-index: 1;
}
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>
some title
</title>
</head>
<body >
<div class="custom-padding">
<nav>
<div class="logo">Form</div>
<ul class="menu-area">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</div>
</body>
</html>
代码笔： https: //codepen.io/marchmello/pen/xxGQbJa
浮云间
TA贡献1829条经验 获得超4个赞
这就是我修复它的方法：
.menu-area li {
margin-left: 5px;
display: inline-block;
border-radius: 10px;
background: #ededf1;
box-shadow: 3px 3px 5px #8e8e91,
-3px -3px 5px #ffffff;
}
- 4 回答
- 0 关注
- 137 浏览
添加回答
举报
0/150
提交
取消