5

ラジオボタンとラベルのセットがあります。ラジオ ボタンはラベルの前に表示されます。それらのセットをフィールドセット内に集中させたいと思います。ディスプレイをインラインブロックに設定してdivに入れてみました。ほとんど機能しますが、1 つのラベルが次の行にぶつかります。

私の理解では、 div display: inline-block を指定すると、それが縮んで収まるようになりますが、ここで確認できる予期しない動作が発生しています(以下のコード):

http://jsfiddle.net/abalter/TedVe/13/

マージンなどを手動で設定する唯一の希望はありますか? なぜdivが縮小しすぎているのかを理解する方法はありますか??

更新...ラベルから右マージンを削除すると（次のラジオボタンの前にスペースを追加するためにそこにあります）、収まります。代わりに、ボタンに margin-left を追加しても、まだ問題があります。

<form>
<fieldset>
    <legend>Test</legend>
    <div>
        <input class="radio-input" type="radio" name="test" value="yes" />
        <label class="radio-label">Yes</label>
        <input class="radio-input" type="radio" name="test" value="yes" />
        <label class="radio-label">No</label>
        <input class="radio-input" type="radio" name="test" value="yes" />
        <label class="radio-label">Maybe</label>
    </div>
</fieldset>


.radio-label {
    float: left;
    margin-right: 3%;
}
.radio-input {
    float: left;
}
fieldset {
    text-align: center;
}
div {
    display: inline-block;
    margin: auto;
    border: 1px solid black;
}
4

4 に答える 4

0

divの幅を追加すると、問題が修正される場合があります

.radio-label {
    float: left;
    margin-right: 3%;
}
.radio-input {
    float: left;
}
fieldset {
    text-align: center;
}
div {
    display: inline-block;
    margin: auto;
    border: 1px solid black;
    width:50%
}
于 2013-08-28T07:17:24.553 に答える