如何在ul li标签内的标签之间获得更多空间

时间:2013-07-16 16:30:06

标签: css3 html-lists hyperlink

我正在创建一个带有ul li标签的菜单栏,链接是如何让它们在链接之间有更大的空间?

1 个答案:

答案 0 :(得分:0)

为li元素提供保证金......

<nav>
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Gallery</span></a></li>
    <li class="last"><a href="#"><span>Map</span></a></li>
  </ul>
</nav>


<style>
li{
    display:inline-block; 
    background:blue; 
    width:100px; 
    height:20px; 
    text-align:center;
    margin-right:15px; /* edit this margin to separate your elements*/
}
a{
    text-decoration:none; 
    color:black;
    display:block;
}
.last {margin-right:0px;}
</style>

http://jsfiddle.net/Tv7pA/

你可以从最后一个元素中删除边距,例如top或jQuery或css li:last-child,li:nth-​​child(3)...但最好的方法是使用jQuery或者使用类coz它是sup。在所有浏览器中