1

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

我已经在两个元素上尝试了 margin-left: 0px 并且我已经尝试了 list-style:none; 这确实有助于消除子弹并将所有剩余的东西滑动到坚不可摧的 40px 边距。

我通过反复试验确定，如果我在我的 li 中这样做：

left: -40px;
position: relative;

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

我的样式代码如下所示：

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 线的左侧和右侧弹出 li 子弹。

4

2 回答 2

2

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

添加

padding:0;

到风格，<ul>你的神秘差距应该消失了。然而，这可能对子弹位置产生不良后果。根据您的特定布局要求，摆脱项目符号或设置list-style-position为两种可能的补救措施。inside

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

于 2012-04-12T18:28:42.850 回答
0

您是否尝试过使用列表样式位置，即：

list-style-position: inside;

或者

list-style-position: outside;
于 2012-04-12T18:06:08.193 回答