是否可以在列表中移动左下或右下边框？

Question

我有border-bottom我 li的，但我有padding-left:10px我的ul，所以它会将所有内容向右微移 10 像素。

我想知道是否有可能将边界移回左侧？或者这是不可能的，因为边界是 的一部分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;       
}

小提琴

Answer 1

您将此填充应用于您的元素ul，而不是元素li。首先，您需要将 的 padding 重置ul为 0（因为大多数浏览器默认应用于padding-left该元素）：ul

.menuoptions {
    ...
    padding: 0;
}

然后将 赋予padding-left您的li元素：

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

工作 JSFiddle 演示。