<li> 元素对齐 - 减少项目符号左侧的空间答案

【问题标题】：<li> element alignment - reduce space on left side of bullet<li> 元素对齐 - 减少项目符号左侧的空间
【发布时间】：2012-08-09 20:56:25
【问题描述】：

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

【问题讨论】：

标签： html css css-float html-lists

【解决方案1】：

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

Example with bullets inside

Example with bullets outside

【讨论】：

【解决方案2】：

这是一种你可以做不同的方法；

http://jsfiddle.net/EeHYg/

【讨论】：

【解决方案3】：

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

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

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

【讨论】：