Question

我有这样的代码。但是，改变的背景并没有触及div的左边界。如何在不改变文本位置的情况下完成此操作（'元素1'）？

CSS：

    li{
        list-style-type: none;
    }
    li:hover{
        background: green;
    }

HTML：

<div style="border: 1px solid black; width: 200px;">
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>
</div>

http://jsfiddle.net/F698P/

Answer 1

删除li的边距并向其添加一些padding。

li{
    list-style-type: none;
    margin-left: 0; /* assuming it had 10px margin first */
    padding-left: 10px; /* more padding */
}
li:hover{
    background: green;
}

唯一不允许它在左侧有背景颜色的是额外的余量。您也可以检查填充的ul属性。这只是一个额外的间距。

ul是问题

如我所说，Ul也有保证金，

所以这里是更新的小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/F698P/1/

添加的CSS是

ul {
    padding: 0;
}

您可以为li元素添加更多填充，以使文本返回到必须去的位置。

Answer 2

将ul的填充设置为0px.

<style>
    ul {
        padding: 0;
    }
    li {
        list-style-type: none;
        padding-left: 65px;
    }
    li:hover {
        background: green;
    }
</style>

<li>鼠标悬停背景</li>

2 个答案:

ul是问题