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/

リストごとにアイテムが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属性の左側のパディングを変更する必要があると思います。

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

これは、別の方法で行うことができる1つの方法です。

http://jsfiddle.net/EeHYg/

于 2012-08-13T15:46:15.510 に答える
0

ブラウザが異なれば、リストはさまざまな方法で表示されます。

これを行う最も一貫した方法は、ulとそれに含まれるli要素のパディングとマージンを0に設定することです。

この後、ulマージンを目的のレベルまで増やしたい場合があります。

于 2012-08-13T15:41:48.513 に答える