CSS的列表項之間的分隔

我有，我有發揮各地的列表下面的HTML/CSS代碼，以便它看起來在所有瀏覽器一樣的...CSS的列表項之間的分隔

<div> 
    <ul> 
     <li><a href='#'>Item 1</a></li> 
     <li><a href='#'>Item 2</a></li> 
     <li><a href='#'>Item 3</a></li>  
    </ul> 
</div>

CSS：

div { 
    width:290px; 
} 
ul { 
    padding:0 15px; 
    margin:5px 0 0 0; 
    font-size:12px; 
    color:#999; 
} 

ul li { 
    padding:5px; 
    margin:2px 0; 
    border-bottom:1px solid #CCC; 
    list-style-position:inside; 
    overflow:hidden; 
    font-size: 12px; 
    line-height: 24px; 
    list-style-type:circle; 
} 

ul li:hover { 
    background-color:#EEE; 
} 

ul li a { 
    color: #333333; 
    display: block; 
    float: right; 
    font-family: Verdana,Geneva,sans-serif; 
    font-size: 12px; 
    line-height: 14px; 
    margin: 0; 
    padding: 5px 0; 
    text-decoration: none; 
    width: 238px; 
}

懸停時，列表項背景顏色會變成灰色，並且在每個分隔線之前的頂部會有一個2像素的白色間隙。

我遇到問題的地方是在每個列表項底部以及頂部都有這2個像素的間隙。

任何想法？

來源

2012-03-24 Tom

更換利潤率這樣的：

ul li { 
    margin:0; 
}

來源

2012-03-24 12:24:45 Joseph

更新，頂部和底部必須拆除 – Joseph 2012-03-24 12:26:57

不知道我的問題是所有清楚......我想在頂部和底部的白色2px的差距...... – Tom 2012-03-24 12:30:06

怎麼一回事，因爲你在李定義margin:2px 0;。刪除那margin。

入住這http://jsfiddle.net/d8gNJ/

來源

2012-03-24 12:25:11 sandeep

不知道我的問題是清楚的...我想要在頂部和底部的2px白色差距... – Tom 2012-03-24 12:28:24

@湯姆：在UL李懸停更新你的CSS

ul li:hover { 
    background-color:#EEE; 
    padding-top:2px; 
}

您可以點擊此處查看http://jsfiddle.net/6DXx6/3/

讓我知道這是否是你想要的

來源

2012-03-24 18:24:28

請參閱下面的提琴代碼和演示

小提琴：http://jsfiddle.net/S4wN8/1/

演示：http://jsfiddle.net/S4wN8/1/embedded/result/

來源

2012-03-24 19:13:45 w3uiguru

CSS的列表項之間的分隔

回答

相關問題