<li>元素对齐 - 减少项目符号左侧的空间</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

更改padding-left的{​​{1}}属性。

ul

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

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

Answer 2

我相信您必须更改li属性的填充左侧。

li {
padding-left: 0px;
}

Answer 3

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

http://jsfiddle.net/EeHYg/

Answer 4

另一个选项...默认情况下，大多数Web浏览器都会在内容流之外显示项目符号。您可以将list-style-position更改为inside来更改此设置。如果您在下面的示例中注意到，子弹在内部时显示在JSFiddle中，但不在外部。让子弹在外面显示的唯一方法是为padding-left元素ul设置select focus.in() as post, focus.name as page, focus.out("is_language").name as language, focus.out("is_network").name as network from (select @this as focus from Page) unwind post, language, network, page ----+------+-----+----+--------+------- # |@CLASS|post |page|language|network ----+------+-----+----+--------+------- 0 |null |#11:0|1 |Welsh |1 1 |null |#11:1|1 |Welsh |1 2 |null |#11:2|1 |Welsh |1 3 |null |#11:3|1 |Welsh |1 4 |null |#11:4|1 |Welsh |1 5 |null |#11:5|1 |Welsh |1 6 |null |#11:6|1 |Welsh |1 ----+------+-----+----+--------+------- 。

this example

Example with bullets inside

Answer 5

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

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

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