0

私は要素のbutton中にいdtます。

開始イメージ

すべてがうまく見えますが、ボタンを右にフロートさせたいです。

右にフロート

ボタンにフロートを追加すると、ボタンdtが短くなり、見栄えが悪くなります。

ここに画像の説明を入力

追加overflow:autoするとこれは修正されますが、左側のテキストが垂直方向の中央に配置されなくなりました。vertical-align:centerこれを修正したり、ハッキングしても役に立ちませんdisplay:table-cell;。私が見落としているこれを達成する別の方法はありますか?

<dt style="overflow:auto">Title <button style="float:right">save</button></dt>

4

3 に答える 3

2

これは通常、私がこれを行う方法です。

私のCSS：

dt {
    display: block;
    background: -webkit-linear-gradient(#bfbfbf 0%, #828282 100%);
    background:         linear-gradient(#bfbfbf 0%, #828282 100%);
    padding: 10px 20px;
    margin: 10px auto;
    border-radius: 3px;
    width: 400px;
}

dt:after {
    content: "";
    display: table;
    float: none;
}

dt p {
    display: inline-block;
}

dt button {
    margin: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    float: right;
}

私のHTML：

<dt>
    <p>My Title</p>
    <button>Save</button>
</dt>

テキスト ブロック「My Title」は である必要があることを覚えておいてくださいinline-block。block

それが助けになるか、少なくともあなたを正しい方向に向けてくれることを願っています.

于 2013-08-16T23:23:10.523 に答える
-1

使用する代わりに、フロート要素をクリアする必要があると思いますoverflow:auto;

例： http： //jsfiddle.net/ChrisMBarr/UGWuc/

編集

今すぐお試しください：http：//jsfiddle.net/ChrisMBarr/6HXek/5/

ボタンには、タイトルにはないパディングがありました。これにより、垂直方向のパディングが一致します。

于 2013-01-31T05:31:24.553 に答える
-1

要素を単に浮かせるよりも優れたアプローチがあります。もちろん、タイトルボタン構造を繰り返すことを計画していると仮定して、それらを div 要素でラップするか、テーブルを作成することをお勧めします。サンプルは次のようになります。

<div style="width:50%;">Title</div>

<div style="width:50%;">
    <button style="float:right">Button</button>
</div>

編集 - -

手っ取り早いテーブル アプローチを試してください。

<body>
<table style="width:100%">
    <tr><td>Title</td>
    <td><button style="float:right">save</button></td></tr>
</table>
</body>

また、dt要素とは何ですか？

于 2013-01-31T05:24:52.910 に答える