Question

我正在制作一个左侧有导航菜单的网站，我想在每个链接下创建空间，因为现在这些链接位置太靠近而且没有谷歌搜索帮助，因为所有解决方案都是针对链接的相邻，但我的菜单就像一个LIST所以我需要VERTICAL空间，空间在每个链接旁边不是每个链接!!!提前谢谢。

请解释我在这方面非常新。

CODES：

<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>

AND 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;
}

Answer 1

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

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更改为您想要的任何内容。

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

1 个答案: