0

css list-style-type 画像を親の境界線に揃えようとしています。

残念ながら、非常に古い IE ブラウザー、Firefox、Opera でも美しく動作しますが、WebKit ブラウザー (Chrome/Safari) では非常に面倒です。

何が原因で、背景画像を使用する以外の回避策はありますか? これはreset.cssの問題ではなく、いくつかの異なるリセットを試みましたが、何も修正されていないようです。

画像

例

JSFiddle

http://jsfiddle.net/zzUdk/

ソース

HTML

<ul>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
  <li><a href="#">Link Title</a></li>
</ul>

CSS

ul {
    margin: 2em;
    border-left: solid 3px #999;
}

ul li {
    position: relative;
    left: 0.6em;
    list-style-type: disc;
}

(ところで、Opera ユーザーの皆さん、JSFiddle からコードをコピーできますか? 私はここ数週間できないので? :()

4

1 に答える 1

2

使用する場合:

list-style-position: inside

ラウンドを li 要素内に配置しますが、正確には開始位置に配置します。その後、好きな場所に移動できますが、今は大丈夫だと思います。

http://jsfiddle.net/zzUdk/2/

PS: この動作をブラウザに中継すると、おそらく問題が発生します。独自のリスト アイコンを配置することをお勧めします。これにより、結果がより良く一貫したものになります。

于 2013-02-23T20:34:09.610 に答える