7

SOでのグーグルもブラウジングも私を助けませんでした-ここの誰かがこれを解決できることを願っています:

私は次のhtmlを持っています:

<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>

とcss

ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}

「hook.png」画像は 32x35 ピクセルですが、リスト アイテムを作成するたびに、テキスト (ABC など) が常に画像の下に表示されます。line-height とそれらの 100% のものを試してみましたが、どちらもうまくいきませんでした。

簡単なヘルプ:/ ?

4

4 に答える 4

8

いくつかのバリエーションを試してください

ul{
    background-image: url(../img/hook.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

明らかに、その位置があなたのニーズに合う可能性は低いですが、この方法をいじるのが最善の策です.

于 2012-11-19T14:00:09.000 に答える
1 
<html>
<head>
<style>
ul
{
    list-style-image:none;
}
li
{
    color:#FFFFFF;
    font-size:16px;
    text-shadow: 0em 0.13em 0.13em #2A2A2A;
    font-family:Helvetica,Arial,Sans-Serif;
    font-weight:normal;
    line-height:35px;

    margin-bottom:5px;
    padding-left: 36px;
    background-image: url('../img/hook.png');
    background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>

リストのカスタム アイコンを実装するときに、デザイナーがリスト スタイル イメージを使用しようとするのを見たことがありません。これが理由だと思います :)

于 2012-11-19T14:17:16.997 に答える
0

あなたの問題がテキストがベースラインを下回っているように見えることを私が理解した場合は？

テキストに以下のプロパティを設定してみてください。

パディングボトム

于 2012-11-19T12:57:49.010 に答える
0

HTMLの時間を節約できるようなものを思いつきました：

<ul class="rozcestnik">
  <li><a href="#" title="1">1</a></li>
  <li><a href="#" title="2">2</a></li>
  <li><a href="#" title="3">3</a></li>
</ul>

CSS:

.rozcestnik {
    list-style-type: none;
    padding: 0;
    margin: 2.5em 2em 0;
}

.rozcestnik li:before {
    background: url("icon.png") no-repeat scroll 50% 50% transparent;
    content: " ";
    display: block;
    height: 20px;
    left: -20px;
    position: absolute;
    top: 0;
    width: 20px;
}
.rozcestnik li {
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

カスタムリストイメージによると、おそらく上部とサイズの「:before」と「li」のパディングをカスタマイズするだけで済みます。

すべての主要なブラウザーとアプリケーション IE8 などで動作します。

于 2013-09-05T08:49:42.220 に答える