Question

基本上我正在尝试浮动，大多数列表项元素与标签下面的输入水平放置。这是我想要实现的模板。

enter image description here

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

<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/

感谢您的帮助。

Answer 1

这里有类似的东西，不使用花车：

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;        
}

标签包装输入并设置为内联块，而不是浮点数。单选按钮应位于字段集中。请注意，jsfiddle正在添加normalize.css，它会从字段集和图例中删除边框/边距/填充。如果布局需要，您可以选择将Administrative字段集浮动到右侧。

浮动表单元素

1 个答案:

HTML

CSS