1

チェックボックスボタンの横にラベルテキストを配置する方法を理解する必要があります。チェックボックスボタンの真ん中にテキストが必要です。私はいつもテキストの少し上か少し下にチェックボックスを持っていました。真ん中でそれを正確に取得するのは難しい。あるブラウザで真ん中に固定すると、他のブラウザでは真ん中になりません。それを台無しにするピクセルは常に1つか2つあります。

これがフィドル ですhttp://jsfiddle.net/JhPHm/

<style>
.field input
{
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.field label
{
    margin: 0;
    padding: 0;
    vertical-align: top;
    font: normal 12px/14px arial;
}
</style>

<div style="padding: 30px;">

<div class="field">
    <label for="x"><input type="checkbox" id="x" name="x" value="1" /> Text in the middle</label>
</div>

</div>

すべてのブラウザの中央にテキストを表示するのを手伝ってください。ここに違いのある写真があります：http： //img708.imageshack.us/img708/5410/checkbox.png

4

3 に答える 3

0

これをハッキングした方法は、次のように相対位置を使用することです。

input[type="radio"], input[type="checkbox"] {
    cursor: pointer;
    line-height: normal;
    margin: 0px;
    position: relative;
    top: -3px;
}

たとえば、それらを 3 ピクセル上にシフトする場合。上で指摘したように、ブラウザによって結果が異なる場合があります。

この状況では、Firebug または Chrome Developer Tools が大いに役立ちます。他の場所から継承しているゴミがあるかもしれません。上記の例のように、CSS 構造のより高い (そして避けられない) 何かがすべての入力に 4px のマージンを設定し、私を台無しにしていたため、マージンを 0px に戻しました。

幸運を！

于 2013-01-24T21:37:46.353 に答える
0

入力要素の位置合わせは難しく、ほとんど不可能な場合もあります。

問題が古いブラウザーでの誤動作である場合、これらのブラウザーで Web を閲覧している人は、あなたのサイトだけでなく、多くの場所でチェックボックスの位置がずれていることに遭遇することを考慮してください。いわば彼らの周りで崩壊している間、彼らはウェブを閲覧しています。古いブラウザーを使用していることを知っているか、すべてのサイトにこれらの小さな不具合が見られることに気付かないため、ユーザーは気にしません。

許容できる最終結果を得るために、さまざまなブラウザーにあらゆる種類の微調整と修正を追加する必要がある場合は、これらすべての微調整が CSS のサイズと複雑さを増し、将来。

結局のところ、これはオーディエンス、予算、そして明らかにチェックボックスの数に依存します。;-)

于 2012-10-25T19:37:33.300 に答える
0

の代わりにvertical-align:top、 を試してくださいvertical-align:middle。少しは役立つかもしれませんが、入力要素はブラウザー間で不均一であることで有名です。

于 2012-10-25T18:44:15.660 に答える