无法在<ul>列出CSS之前和之后删除空格

时间:2017-04-22 12:05:30

标签: html css html-lists

我有一些文字,然后是本节:

<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;      
}

然而,在线后和方框之后,我获得了一个很大的空间(见下文),无法通过marginpaddingline-height删除。我已经没想完了。这一定是微不足道的。有什么想法吗?

enter image description here

1 个答案:

答案 0 :(得分:1)

试试这个。 :)

&#13;
&#13;
.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;      
}
&#13;
<hr/>
<div class="older-posts">
<ul>
    <li><a href="/index2/">Older posts</a></li>
    <li><a href="/archive/">Archive</a></li>
</ul> 
</div>
&#13;
&#13;
&#13;