0

基本的に、私はフロートしようとしています.ほとんどのリスト項目要素は、ラベルの下の入力で水平に配置されています. これが私が達成しようとしているもののテンプレートです。

ここに画像の説明を入力

ここにいくつかのコードを含めました：

<div>
 <label for="headline">Headline: </label>
 <input type="text" name="headline" value="Milestone" maxlength="50"size="55">
<br>

<div class="dates clearfix">
 <label for="effect_date">Date of Effect:</label>
 <input type="text" name="effect_date">

 <label for="end_date">End Date (opt):</label>
 <input type="text" name="end_date">

 <label>Date Visible:</label>

 <input type="radio" name="is_date_visible" value="2012">

 <label for="is_date_visible_yes">Yes</label>
 <input type="radio" name="is_date_visible">
 <label for="is_date_visible_no">No</label>
 <br>

 <label>Administrative:</label>
 <input type="radio" name="is_adminis" value="1">
 <label for="is_admin_yes">Yes</label>
 <input type="radio" name="is_adminis">
 <label for="is_admin_no">No</label>
</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

そしてCSS：

    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; }

    div.dates {

    }
    .dates label {
         display: block;
         color: #2c93d5;
         font-size: 15px;
         margin-bottom: 5px;
    }
    .dates input {
         display: block;
    }
    ​.dates label, .dates input {
         float: left;

    }

CSSでいろいろ試してみましたがだめでした。基本的に、入力をラベルの下にドロップすることはできず、それらをすべて並べることはできません。通常、それらは上からずらして出てきます。

私が取り組んでいるフィドルリンクもあります：

http://jsfiddle.net/vjDEq/

助けてくれてありがとう。

4

1 に答える 1

0

フロートを使用せずに、同様のものを次に示します。

http://jsfiddle.net/vjDEq/19/

HTML

<div>
    <label for="headline">Headline: </label>
    <input type="text" id="headline" name="headline" value="Milestone" maxlength="50"size="55">
</div>

<div class="dates">
    <label for="effect_date">Date of Effect:
        <input type="text" name="effect_date">
    </label>

    <label for="end_date">End Date (opt):
        <input type="text" name="end_date">
    </label>

    <fieldset>
    <legend>Date Visible:</legend>
        <label for="is_date_visible_yes">
            <input type="radio" name="is_date_visible" id="is_date_visible_yes" value="yes">
            Yes
        </label>

        <label for="is_date_visible_no">
            <input type="radio" name="is_date_visible" id="is_date_visible_no" value="no">
            No
        </label>
    </fieldset>

    <fieldset>
    <legend>Administrative:</legend>
        <label for="is_admin_yes">
            <input type="radio" name="is_adminis" id="is_admin_yes" value="1">
            Yes
        </label>

        <label for="is_admin_no">
            <input type="radio" name="is_adminis" id="is_admin_no" value="0">
            No
        </label>
    </fieldset>
</div>
​

CSS

#headline {
    margin-bottom: 1em;
}

label {display: block;}

.dates label {
    color: #2c93d5;
    font-size: 15px;
    margin-bottom: 5px;
}

.dates input {
    display: block;
}

.dates fieldset input {
    display: inline;
}

.dates label, .dates fieldset {
    display: inline-block;
    margin-right: 2em;
}

.dates fieldset label {
    margin-right: 1em;        
}

float の代わりに、ラベルは入力をラップし、インライン ブロックに設定されます。ラジオボタンはフィールドセットにある必要があります。jsfiddle が normalize.css を追加していることに注意してください。これにより、フィールドセットと凡例からボーダー/マージン/パディングが削除されます。レイアウトで必要な場合は、管理フィールドセットを右側に移動するオプションがあります。

于 2012-09-26T19:44:12.340 に答える