0

詳細を表示するには、タブ内の動的テキストの一部と一緒に展開アイコンを表示する必要があります。展開アイコンには背景画像があるため、ブロックとして表示する必要があります。クリックすると、背景画像がマイナスに変更されるクラスが適用され、リンクの下のテキストが表示されます。

動的テキストの左側にアイコン5pxを表示し、それをブロックのままにする方法はありますか（背景画像を表示できるようにするため）？

私のHTMLは以下のとおりです。タブには別の機能を持つチェックボックスも含まれていることに注意してください。

  <div class="expandLinkWO">Cardio &amp; Arms<span class="plusCircle btn"><span></span>     </span> <span class="tickBox"></span>
4

2 に答える 2

3

あなたはあなたが望むことをするインラインブロックを使うことができます。または、ボタンをフローティングにすることもできます。両方とも機能するはずです。

インラインバージョン

.plusCircle {
   display:inline-block;
   vertical-align: top;
   margin-right: 5px;
}

フロートバージョン：

.plusCircle {
   display:block;
   float:left;
   margin-right: 5px;
}

インラインブロックの方がいいと思いますが、IEとインラインブロックは最高の友達ではありません。

于 2012-12-06T11:56:09.613 に答える
1

おそらく必要ですinline-block：

.plusCircle { 
    background: url(your/img/url.jpg);
    height: 20px;
    width: 20px;
    display: inline-block;
    margin-left: 5px;
}
于 2012-12-06T11:53:47.717 に答える