在导航菜单中的每个链接下创建VERTICAL空格?

问题描述 投票:-1回答:1

我正在制作一个左侧有导航菜单的网站,我想在每个链接下创建空间,因为现在这些链接位置太靠近而且没有谷歌搜索帮助,因为所有的解决方案都是针对每个链接的链接其他但我的菜单就像一个列表所以我需要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;
}
html css menu navigation sidebar
1个回答
0
投票

要进一步放下链接,可以在每个链接之间添加填充。以下是使用填充的方法:

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>

如果您想在顶部和底部之间留出更多或更少的空间,请将数字15更改为您想要的任何内容。

© www.soinside.com 2019 - 2024. All rights reserved.