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

Question

我的border-bottom已li，但我padding-left:10px ul ul，所以它向右推动了10px的所有内容。

我想知道是否有可能将边界敲回左边？或者这是不可能的，因为边框是<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> ？

的一部分

HTML

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

CSS

{{1}}

Fiddle

Answer 1

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

.menuoptions {
    ...
    padding: 0;
}

然后将padding-left提供给您的li元素：

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

Working JSFiddle demo

Answer 2

它是ul的一部分，但你可以使用margin-left：10px而不是padding（只要它是一个块元素）并删除边框的那一部分。