如何删除列表中元素之间的空格？

我想删除列表中元素之间的空格。如果我将整个列表放在一行中，我可以做到这一点，但这使得阅读起来非常困难。如何删除列表中元素之间的空格？

这就是我所拥有的，我想让他们对抗海誓山盟。

<div id="navBar"> 
    <ul> 
     <li><a href="/" class="home">HOME</a></li> 
     <li><a href="/">ROOMS</a></li> 
      <!-- <ul> 
       <li>Test</li> 
      </ul> --> 
     <li><a href="/profiles/" class="end">PROFILES</a></li> 
    </ul> 

     <!-- stuff --> 
</div>

CSS：

#navBar { 
display: inline-block; 
height: 30px; 
margin: 0; 
padding: 0; 
border-top: 3px ridge #292929; 
} 

#navBar ul{ 
display: inline; 
list-style: none; 
margin: 0; 
padding: 0; 
font: 15px bold Arial; 
background: transparent; 
} 

#navBar ul li { 
padding: 0; 
display: inline; 
text-align: center; 

} 

#navBar ul li a{ 
display: inline-block; 
width: 110px; 
height: 23px; 
padding-top: 7px; 
text-decoration: none; 
color: White; 
border-right: 1px groove #292929; 
border-bottom: 1px groove #292929; 
background-color: #70797F; 
}

我认为这就是它，涉及到网页的这一部分。

谢谢！

来源

2012-04-27 mawburn

使用 “浮动：左”，而不是 “显示：内联”

检查这个http://jsfiddle.net/ckzmF/

#navBar ul li { 
    padding: 0; 
    text-align: center; 
    float:left; 
    /* display: inline; */ 
}

来源

2012-04-27 02:13:10 seanbun

所有优秀的答案，但你是否注意到，我会错过了不需要的内联。谢谢。 – mawburn 2012-04-27 02:42:52

当你应用float时，它使内联元素，所以你不需要设置内联。这是暗示的。 – 2012-04-27 03:10:48

很高兴知道。 TY。我还在学习。 – mawburn 2012-04-27 13:07:31

将您的li浮动到左侧。

#navBar ul li { 
    padding: 0; 
    display: inline; 
    text-align: center; 
    float: left; 
}

jsFiddle

来源

2012-04-27 02:10:14 SenorAmor

随着float属性，你可以删除元素之间的空间。 check this

#navBar ul li 
{ 
padding: 0; 
display: inline; 
text-align: center; 
float:left; 

}

来源

2012-04-27 02:23:35

您还可以设置利润率左或填充左到-2px（或适合任何其他数字）

来源

2012-05-12 16:44:25 thoseios

如何删除列表中元素之间的空格？

回答

相关问题