在导航菜单中的每个链接下创建VERTICAL空格?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在导航菜单中的每个链接下创建VERTICAL空格?相关的知识,希望对你有一定的参考价值。
我正在制作一个左侧有导航菜单的网站,我想在每个链接下创建空间,因为现在这些链接位置太靠近而且没有谷歌搜索帮助,因为所有的解决方案都是针对每个链接的链接其他但我的菜单就像一个列表所以我需要VERTICAL空间,空间在每个链接旁边不是每个链接!先感谢您。
请解释我在这方面非常新。
码:
<aside>
<nav>
<ul>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
<li>
<a href="#.html" class="button">NAME</a></li>
</ul>
</nav>
</aside>
和CSS:
aside {
overflow:hidden;
display: inline-block;
background-color: #E3D6C8;
}
nav ul {
list-style-type: none;
}
nav {
float: left;
padding: 10px;
padding-bottom: 130px;
padding-right: 35px;
}
a {
text-decoration: none;
color: white;
}
a.button,div.container {
float:left;
}
a.button {
background-color: #FFB000;
border: 1px solid;
border-radius: 7px;
margin-right: 5px;
padding:5px 5px 5px 5px;
}
答案
要进一步放下链接,可以在每个链接之间添加填充。以下是使用填充的方法:
aside {
overflow:hidden;
display: inline-block;
background-color: #E3D6C8;
}
nav ul {
list-style-type: none;
}
li {
padding: 15px 0px 15px 0px;
}
nav {
float: left;
padding: 10px;
padding-bottom: 130px;
padding-right: 35px;
}
a {
text-decoration: none;
color: white;
}
a.button,div.container {
float:left;
}
a.button {
background-color: #FFB000;
border: 1px solid;
border-radius: 7px;
margin-right: 5px;
padding:5px 5px 5px 5px;
<aside>
<nav>
<ul>
<li>
<a href="#.html" class="button">NAME</a></li><br/>
<li>
<a href="#.html" class="button">NAME</a></li><br/>
<li>
<a href="#.html" class="button">NAME</a></li><br/>
<li>
<a href="#.html" class="button">NAME</a></li><br/>
<li>
<a href="#.html" class="button">NAME</a></li><br/>
<li>
<a href="#.html" class="button">NAME</a></li>
</ul>
</nav>
</aside>
以上是关于在导航菜单中的每个链接下创建VERTICAL空格?的主要内容,如果未能解决你的问题,请参考以下文章