<li>元素对齐 - 减少子弹左侧的空间

Question

我在对齐左侧的<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>

Answer 1

更改ul的padding-left属性。

ul {
  padding-left: 20px;
}

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

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

Answer 2

我相信你必须改变li属性的padding-left。

li {
padding-left: 0px;
}

Answer 3

这是你可以用不同方式做到的一种方式;

http://jsfiddle.net/EeHYg/

Answer 4

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

里面有子弹的例子

外面有子弹的例子

Answer 5

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

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

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