4

我在对齐<li>左侧的元素时遇到问题。

在下面给出的图像中，您可以看到每个子弹的左侧都有空间。我想删除该空间，以便Imported&100% Genuine项目符号都位于绿色刻度线的正下方。

在此处输入图像描述

这是我正在使用的代码。

<table border="1">
    <tr>
        <td><ul style="margin:0;"><li>Imported</li></ul></td>
        <td><ul style="margin:0;"><li>Authentic & Licensed</li></ul></td>
    </tr>
    <tr>
        <td><ul style="margin:0;"><li>100% Genuine</li></ul></td>
        <td><ul style="margin:0;"><li>200 GSM Paper Depth</li></ul></td>
    </tr>
</table>
4

5 回答 5

8

更改 的padding-left属性ul。

ul {
  padding-left: 20px;
}

http://jsbin.com/upehik/1/

尽管我不得不想知道如果每个列表只有一项，为什么要使用列表？

于 2012-08-13T15:33:54.493 回答
2

另一种选择...默认情况下，大多数 Web 浏览器都会在内容流之外显示项目符号。list-style-position您可以通过将 更改为来更改此设置inside。如果您在下面的示例中注意到，当项目符号位于内部而不是外部时，它们会显示在 JSFiddle 中。让子弹在外面时显示的唯一另一种方法是padding-left为ul元素设置 （在本例中）。

里面有子弹的例子

外面有子弹的例子

于 2015-12-23T08:07:15.013 回答
1

我相信您必须更改li属性的 padding-left 。

li {
padding-left: 0px;
}
于 2012-08-13T15:37:03.213 回答
1

这是您可以采取不同方式的一种方法；

http://jsfiddle.net/EeHYg/

于 2012-08-13T15:46:15.510 回答
0

不同的浏览器以不同的方式显示列表。

执行此操作的最一致的方法是将 ul 及其包含的 li 元素的填充和边距设置为 0。

在此之后，您可能希望将 ul 边距增加到所需的水平。

于 2012-08-13T15:41:48.513 回答