css - 是否可以在列表中向左或向右移动 border-bottom？

Question

我的 li 上有 border-bottom 但我的 ul 上有 padding-left:10px code> 所以它会将所有内容向右移动 10px。

我想知道是否可以将边界向左移？或者这是不可能的，因为边框是 ul 的一部分？

html

<ul class="menuoptions">
<li>Home</li>

<li>Firewalls</li>

<li>SSL VPN Encryption</li>

<li>Security In Education</li>

<li>Wireless Access Points</li>
</ul>

CSS

.menuoptions {
    position:relative;
    height:30px;
    width:225px;
    color:#666;
    line-height:40px;
    font-weight:bold;
    padding-left:10px;
    margin-top:-10px;
    top:10px;
    list-style:none;

}

.menuoptions li {
    border-bottom:solid 1px #ccc;       
}

Fiddle

Answer 1

您正在将此填充应用到您的 ul 而不是 li 元素。首先，您需要将 ul 的填充重置为 0(因为大多数浏览器默认将 padding-left 应用于 ul 元素):

.menuoptions {
    ...
    padding: 0;
}

然后将 padding-left 赋给您的 li 元素:

.menuoptions li {
    ...
    padding-left: 10px; 
}

Working JSFiddle demo .