Question

我有以下内容。

<ul>
    <li><a class="admin_btn" href="/adminFormat" style="width:100px;">Format</a></li>
    <li><a class="admin_btn" href="/adminStatus" style="width:100px;">Status</a></li>
    <li><a class="admin_btn" href="/adminMembership" style="width:100px;">Membership</a></li>
</ul>

和

a.admin_btn {
    border: 1px solid #666;
    background: #ddd;
    padding: 2px 5px;
    margin: 10px;
    color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

a.admin_btn:hover {
    background: #bbb;
    color: #000;
}

但是当我在我的网页上使用它时，按钮在垂直方向上太靠近，<li>个圆圈显示。

如何将按钮分开并移除<li>圈？

Answer 1

删除圈子：

ul { list-style-type: none; margin: 0px; padding: 0px }

添加空间，例如使用：

li { margin-bottom: 16px }

Answer 2

这将删除点：

li.leaf, li.collapsed, li.expanded {
    list-style-image: none;
    list-style: none;
    list-style-type: none;
}

ul {
    list-style-image: none;
    list-style: none;
    list-style-type: none;
}

对于空间：

li {
    margin-top:10px;
    margin-bottom:10px;
}

您可以将10px替换为您想要获得所需空间的任何值。

如何使用CSS为顶部和底部的<li>元素添加空间？</li>

2 个答案: