我有一个列表的以下 HTML/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 像素的间隙。
有什么想法吗?
最佳答案
将页边距替换为:
ul li {
margin:0;
}
关于用于列表项之间分隔符的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9851707/