如何刪除列表中元素之間的空格？

我想刪除列表中元素之間的空格。如果我將整個列表放在一行中，我可以做到這一點，但這使得閱讀起來非常困難。如何刪除列表中元素之間的空格？

這就是我所擁有的，我想讓他們對抗海誓山盟。

<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

如何刪除列表中元素之間的空格？

回答

相關問題