html - float 表单元素

Question

本质上，我试图将大多数列表项元素与标签下方的输入水平 float 。这是我要实现的目标的模板。

我在这里包含了一些代码:

<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 尝试了各种方法都无济于事。本质上，我无法让输入降到标签下方，而且我无法将它们全部排成一行，它们通常从顶部交错排列。

我还有一个我一直在研究的 fiddle 链接:

http://jsfiddle.net/vjDEq/

感谢您的帮助。

Answer 1

下面是类似的东西，但没有使用 float :

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 ，标签包装输入并设置为内联 block 。单选按钮应该在字段集中。请注意，jsfiddle 正在添加 normalize.css，它会从字段集和图例中删除边框/边距/填充。如果您的布局需要，您可以选择将管理字段集 float 到右侧。