css - 是否可以在列表中向左或向右移动底部边框？

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元素。首先，您需要将 的填充重置ul为 0（因为大多数浏览器默认适用padding-left于该ul元素）：

.menuoptions {
    ...
    padding: 0;
}

然后给padding-left你的li元素：

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

工作 JSFiddle 演示。

Answer 2

它是 ul 的一部分，但是您可以使用 margin-left:10px 代替填充（只要它是块元素）并删除该部分边框。