如何在垂直导航栏上的这些按钮之间放置空格？答案

【问题标题】：How do I put spaces between these buttons on my vertical navigation bar?如何在垂直导航栏上的这些按钮之间放置空格？
【发布时间】：2014-04-12 20:58:24
【问题描述】：

正如标题所说的那样。我希望在垂直导航栏中的四个按钮之间有空格。 JSFIDDLE

HTML

<div id="classesnav">
<ul>
<li><a href="#">Buttercream Skills</a></li>
<li><a href="#">Flower and Cake Design</a></li>
<li><a href="#">Gum Paste and Fondant</a></li>
<li><a href="#">Advanced Gum Paste Flowers</a></li>
</ul>
</div><!--end of classesnav-->

CSS

#classesnav {   
position:absolute;
}

#classesnav ul {
list-style:none;
display:block;  
}

#classesnav ul li {
padding:10px 3px 10px 3px;
background-color:#FEC7FD;
display:block;
border-radius:10px; 
}

#classesnav ul li a {
display:block;  
text-decoration:none;
color:#000000;
}

【问题讨论】：

你打错字了。display:inline:block; 应该是 display:inline-block;
jsfiddle.net/jats_ptl/u55M5/3 这是您要找的。span>
哦，谢谢。不幸的是，这使酒吧水平。我希望按钮保持垂直，但它们之间有空格。
删除垂直按钮的内联块。 margin-bottom 之间的间距。

标签： html css navbar nav

【解决方案1】：

也许使用margin-bottom：

#classesnav ul li {
    padding:10px 3px 10px 3px;
    background-color:#FEC7FD;
    display:inline:block;
    border-radius:10px;
    margin-bottom: 10px;    
}

Fiddle

【讨论】：

是的，这解决了它。谢谢！