13

ので、私は持っています

<ul>
  <li>Hello</li>
</ul>

と

li {
    list-style-image: url(../img/bullet.png); /* 13x13 px */
    /* line-height: 13px; */
    /* vertical-align: middle; */
    padding-left: 5px;
}

次のように見えます

ここに画像の説明を入力

のテキストとイメージ要素が<li>垂直方向に配置されていない (イメージがテキストよりも高い) ことがわかるように、line-height と vertical-align を適用しようとしました (コードをコメントアウトしました)。良好なアライメントを実現する方法はありますか?

4

5 に答える 5

22

パディングは、要素の内部にあるもの、つまりあなたの場合はテキストにのみ影響します。

使用可能な唯一の位置調整プロパティはlist-style-positionですが、許可される値はinherit、insideまたはのみoutsideです。最も一般的な方法は、次を使用することです。

list-style: none;

次に、目的の画像を<li>の背景として適用します

li {
    /** the image will be vertically aligned in the center **/
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/
    padding-left: 20px; 
}
于 2013-02-05T14:28:00.517 に答える
2

あなたが持つことができます

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>
于 2015-02-20T12:45:24.510 に答える
1

"list-style-image" の代わりに li-tag の img-tag または background: url(..) を定義できます

于 2013-02-05T14:24:30.400 に答える
0

リストアイテムごとに1行しかない場合はpadding-bottom、li要素にいくつか追加できます

于 2013-02-05T14:19:05.567 に答える