Question

我在ul中有一个li元素列表，带有相关的样式类（如下所示）。我想要的是每个列表项都在页面的左边缘。在ul和li周围设置边框我可以看到li项目莫名其妙地缩进了40px。

我尝试过margin-left：两个元素都是0px而且我尝试过list-style：none;这有助于消除子弹并将所有内容从向下滑动到坚不可摧的40px边距。

我已经通过反复试验确定如果我这样做的话：

left: -40px;
position: relative;

我得到了理想的结果但是边距只是弹出到每个li的右侧/尾部，这在视觉上不那么麻烦，但仍然是一个可怕的黑客。必须有办法让它消失吗？

我的样式代码如下所示：

ul.selectorlist
{
    list-style: none;
    padding: none;
    margin: 0px;

    border-width: 1px;
    border-style: solid;
    border-color: white;
}


li.channel
{
//  left: -40px; // <- Does the trick but COME ON, REALLY?!

    width: 100%;
    background-colour: black;
    font-family:georgia;
    font-size:18px;
    padding: 0px;
    margin: 0 0 0 0;

    border-width: 1px;
    border-style: solid;
    border-color: white;
}

注意：

我也玩过：

list-style-position: inside / outside;

实际上在40px线的左侧和右侧弹出了子弹。

Answer 1

一个小实验（在FireFox 11中）显示列表的默认布局包括一个40px左边的填充，这是为子弹腾出空间。

添加

padding:0;

到<ul>的样式，你的神秘差距应该消失。然而，这可能对子弹位置产生不良后果。摆脱子弹或将list-style-position设置为inside都是可能的补救措施，具体取决于您的特定布局要求。

请注意，此填充位于<ul>元素上，当您添加边框时，该元素在视觉上类似于<li>上的边距。这就是Firebug等开发工具或Chrome和IE中包含的开发工具如此有用的原因之一 - 很容易看到任何元素的盒子模型。

Answer 2

您是否尝试过使用list-style-position 即：

list-style-position: inside;

或

list-style-position: outside;

消除<ul>中<li>的“边距”的正确方法是什么？</ul> </li>

2 个答案: