css – 如何增加顶部边界距离？ (ul li)

2023年4月1日 285次阅读

我有一个“ul”列表,我想在“li”上有一个border-top,但我不想要顶部边框和文本之间的默认距离,我需要更多的距离.

不幸的是,我没有看到一种方法来使这项工作,边界间距应该工作,但它没有,只是在周围…

border-spacing: 10px;

#links {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	color: #98af85;
	margin-left:-38px;
	padding-top:4px;
}
#links ul{
	list-style: none;	
}
#links ul li {
	padding: 0px 47px 0px 0px;
	white-space:nowrap;
	display: inline-table;
	border-spacing: 10px;
}
#links ul li a {
	font-size: 14px;
	color: #98af85;
	text-decoration: none;
}
#links ul li a:hover {
	color: #3b8686;
	cursor: pointer;
	text-decoration: none;
	border-top: 9px solid #b8dc7c;
}
<div id="links">
    
 <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>    
</ul>
    
</div>

最佳答案 你可以简单地使用padding-top：

#links {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    color: #98af85;
    margin-left:-38px;
    padding-top:4px;
}
#links ul {
    list-style: none;
}
#links ul li {
    padding: 0px 47px 0px 0px;
    white-space:nowrap;
    display: inline-table;
    border-spacing: 10px;
}
#links ul li a {
    font-size: 14px;
    color: #98af85;
    text-decoration: none;
}
#links ul li a:hover {
    color: #3b8686;
    cursor: pointer;
    text-decoration: none;
    border-top: 9px solid #b8dc7c;
    padding-top: 10px;/*Add padding-top*/
}
<div id="links">
    
 <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>    
</ul>
    
</div>
点赞