我想删除列表中元素之间的空格。如果我把整个列表放在一行,我就可以做到这一点,但这使得阅读起来非常困难。
这就是我所拥有的,我希望他们能够互相冲击。
a http://i47.tinypic.com/1445wuo.jpg
<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;
}
我认为这与页面的这一部分有关。
谢谢!
答案 0 :(得分:2)
将您的li
浮动到左侧。
#navBar ul li {
padding: 0;
display: inline;
text-align: center;
float: left;
}
答案 1 :(得分:2)
使用“float:left”代替“display:inline”
#navBar ul li {
padding: 0;
text-align: center;
float:left;
/* display: inline; */
}
答案 2 :(得分:2)
使用float属性可以删除元素之间的空间。 check this
#navBar ul li
{
padding: 0;
display: inline;
text-align: center;
float:left;
}
答案 3 :(得分:0)
您还可以将margin-left或padding-left设置为-2px(或任何其他适合的数字)