3

だから私はスタイリング<ul>する必要があるものを持っています。+ を使用してスタイルを設定しています。次のようになります。

+ abc
+ 123
+ hello

私が抱えている問題は、+ を実際liの の中央に配置できないことです。のように、プラスは、テキストと垂直方向に揃える必要があるときに、これまでになくわずかにずれていliます。私が間違っていることを知っている人はいますか？

ここにフィドルへのリンクがあります。

CSS

ul {
    list-style: none;
    display: table-cell;
    padding: 0;
    margin: 0;
}

li {
    padding-left: 1em;
    text-indent: -1em;
}

li:before {
    content: "+";
    padding-right: 5px;
    vertical-align: middle;
    display: inline;
    padding-top: 0;
    margin-bottom: .5em;

}

編集

わかりました、私は#contentを他の と揃えるつもりはありませんでしたul。を で垂直方向に中央揃えにするという意味でし+たabc。

4

5 に答える 5

5 
vertical-align: text-bottom;

http://jsfiddle.net/2FZx6/4/

+の真ん中に を置きたくはありませんがli、小文字と同じ高さにします。そのため、text-bottom代わりにを使用する必要がありmiddleます。gディセンダー (または など)で文字を使用する場合y、実際のドットも要素/テキストの中央ではなく、text-bottomまたは上にあることに気付くでしょうbaseline。

(実際には、デフォルト値で十分に機能しbaselineます。)

資力

于 2013-08-09T19:40:20.450 に答える
1

この方法では、もう少し微調整できます。

http://jsfiddle.net/2FZx6/9/

li:before { // add these bits
    position: relative;
    top: -.2em ; // fine tune this however you want
}
于 2013-08-10T00:09:20.903 に答える
1

「+」を使用する代わりに、li で背景画像を使用するだけで運が良くなる場合があります。この方法では、「+」を (背景画像として) 好きなように配置できます。

http://css.maxdesign.com.au/listutorial/master.htm

于 2013-08-09T19:41:52.550 に答える
1

Eric MeyersやNormalize.cssなどのリセット スタイルシートを使用しなくても、ブラウザーは自動的に既定のスタイルを追加します。私の場合、chrome は UL に 40px を追加しました。

私は明示的にパディングを 20px に設定しましたが、見栄えは良いですが、今後の頭痛の種を避けるために、リセット スタイルシートを実装したいと思います。

JsFiddle

ul {
    padding-left:20px;
    margin:0;
}
于 2013-08-09T19:34:01.830 に答える