0

順序付けられていないリストのすべてのリスト要素にこれらの画像があります。

<ul class="bot">
    <li>
       <img src="images/crime.png" class="pil-img">
       <a href="#">Fire</a>
    </li>
</ul>

画像に示されているように、リスト アイテム内のテキストを整列させたい ここで<img />、リスト アイテム内の要素に次のスタイルを指定しました。

.pil-img {
    padding-right: 10px;
    margin: 4px 0px 0px 15px;
}

そして<a />タグへ

.bot li a { margin-top: -5px; }

ここに画像の説明を入力

しかし、これはうまくいかないようです。何か案は？
乾杯

4

2 に答える 2

1

HTML:

<ul>
  <li><a href="#">Some text</a></li>
  <li><a href="#">Some text</a></li>
</ul>

CSS:

ul li {
  background: url(image.png) no-repeat 100% 0;
  line-height: HEIGHT OF IMAGE (i.e. 100px);
  padding: 0 30px 0 0;
}

スタートがあります。あなたのイメージの寸法を知る必要があります。

2 つの画像 (スター + クロス/チェック) が必要な場合は、1 つの bg を に追加し<li>、別の bg を に追加する必要があります<a>。それはあなたを正しい軌道に乗せるはずです。

于 2013-06-10T23:07:18.620 に答える
0

これが全体的なコンテキストで機能するかどうかを確認してください。

HTML

<ul class="bot">
    <li>
       <div class="div_class"><img src="images/crime.png" class="pil-img"></div>
       <div class="div_class"><a href="#">Fire</a></div>
    </li>
</ul>

CSS

.div_class {
    vertical-align: middle;
    display: inline-block;
}

pil-img必要に応じてクラスを微調整できます。

ここにフィドルがあります。

于 2013-06-10T23:13:10.560 に答える