我想在“主頁”、“關(guān)于”和其他按鈕之間添加更多空間。至少約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貢獻(xiàn)1829條經(jīng)驗 獲得超7個贊
您應(yīng)該添加：
.menu-area li{margin: 0 5px";}如果按鈕變大，只需減少鏈接的填充，例如：
.menu-area li a{padding: 0 20px;}
尚方寶劍之說
TA貢獻(xiàn)1788條經(jīng)驗 獲得超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
}
讓我們簡單一點(diǎn)。使用 .
.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貢獻(xiàn)1829條經(jīng)驗 獲得超4個贊
這就是我修復(fù)它的方法：
.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 關(guān)注
- 191 瀏覽
添加回答
舉報
0/150
提交
取消