4

順序付きリストがあり、使用しているアイコン/箇条書きを右側のテキストに垂直に揃えるために、「行の高さ」を使用しました。

現在の問題は、テキストが長くて複数行に分かれている場合、テキストが近すぎて修正方法が見つからないことです。

HTMLは次のとおりです。

<ul class="fancy_list">
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>
<li>Value 5</li>
</ul>

CSSは次のとおりです。

.fancy_list {
    padding-left: 15px;
    margin-bottom: 15px;
    }

    .fancy_list li {
    list-style: none;
    padding: 0 0 0 22px;
    margin-top: 5px;
    background: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/gbs-merchant-dashboard/img/red_sprite.png) -462px -164px repeat-y;
    line-height: 15px;
    height: 30px;
    display:block;
    float: left;
    word-spacing: 0.5px;
    letter-spacing: 0.4px;
    }

また、実際に問題が発生しているページへの [リンク] もあります。

4

4 に答える 4

9

私が思いついた修正は次のとおりです。

.fancy_list li {
     line-height: 1.5em;
     height: auto;
}

使用していたラインの高さは、実際には必要なものに対して小さすぎました。「1.5em」はあなたが探していたものに近いはずです。

さらに、高さは30pxに設定されました。これにより、2行ある場合に、リストアイテムが互いに重なり合うように強制されます。

お役に立てば幸いです。

于 2012-12-18T11:36:06.663 に答える
5 
.fancy_list li {
 padding-bottom:10px

}

この回答が否定的な回答を得た理由がわかりません。このようにして、正しい行の高さを維持し、リスト項目間のスペースを調整できます。これは私にとって完璧に機能します:)

于 2016-05-22T09:57:24.163 に答える
1

使ってみて

ul {
  white-space: initial;
  margin-bottom: 0;
}
于 2021-03-24T14:13:25.940 に答える
0 
.fancy_list li {
     padding-bottom:10px

}

あなたは本当にこれを期待していると思います

于 2015-01-07T07:26:41.987 に答える