我有一些文字,然后是这个部分:
<hr/>
<div class="older-posts">
<ul>
<li><a href="/index2/">Older posts</a></li>
<li><a href="/archive/">Archive</a></li>
</ul>
</div>
这是我的 CSS:
.older-posts ul {
list-style-type: none;
display: inline;
text-align: center;
}
.older-posts li {
justify-content: center;
width: 150px;
height: 45px;
margin: auto;
margin-top: 15px;
border-style: solid;
border-width: 1px;
border-color: grey;
}
.older-posts li a {
color: black;
text-decoration: none;
}
.older-posts li:hover {
color: lightcyan;
background-color: darkslategray;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
但是,在行和框之后,我得到了一个很大的空间(见下文),它不能用 margin
、padding
或 删除行高
。我已经没有想法了。这一定是微不足道的。有什么想法吗?
最佳答案
试试这个。 :)
.older-posts ul {
list-style-type: none;
text-align: center;
}
.older-posts li {
justify-content: center;
width: 150px;
height: 45px;
margin: auto;
margin-top: 15px;
border-style: solid;
border-width: 1px;
border-color: grey;
}
.older-posts li a {
color: black;
text-decoration: none;
}
.older-posts li:hover {
color: lightcyan;
background-color: darkslategray;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
<hr/>
<div class="older-posts">
<ul>
<li><a href="/index2/">Older posts</a></li>
<li><a href="/archive/">Archive</a></li>
</ul>
</div>
关于html - 无法删除 <ul> 列表 CSS 前后的空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43558998/