3

Twitter Bootstrap を使用して、凡例付きのシンプルなフォームを作成しました。この時点で、凡例の言い回しの横にあるアイコンを正しく配置できるようにしたいと考えています。

div のようないくつかのタグを試してみましたが、アイコンが凡例行の一番下に押し込まれます。これを凡例のテキストに合わせたいと思います。

短い例。

    <legend>Contact Categories<div align="right"><i class="icon-comment"></i></div></legend>

これにより、アイコンが凡例の線に対して完全にドロップされます。伝説自体はそのままです。

前もって感謝します。

4

1 に答える 1

5

を使用する理由がわかりませんalign="right"。問題は、あなた<div>がブロックであり、テキストと同じ行にとどまらないことです。

デモ (jsfiddle)

フロートにする必要があります(右または左):

<legend>Contact Categories<div class="pull-right"><i class="icon-comment"></i></div></legend>

またはインラインにする

<legend>Contact Categories<div id="myBlock" class="inline-block"><i class="icon-comment"></i></div></legend>
.inline-block { display: inline-block; }
#myBlock { text-align: right; width: 30%; }
于 2012-10-21T15:26:09.740 に答える