html - 另一种 CCS 形式对齐

Question

我有一个带有输入框描述性标签的表单，该输入框换行到表单窗口中的第二行。这本身就很好，但输入框最终搞砸了，因为它似乎与标签的顶部而不是底部对齐。问题是，如何让输入框对齐到标签的底部？

这是所涉及元素的 CSS。

label {
    font-family: Arial, Verdana;
    text-shadow: 2px 2px 2px #ccc;
    display: block;
    float: left;
    font-weight: bold;
    margin-right:10px;
    text-align: right;
    width: 150px;
    line-height: 25px;
    font-size: 15px;
}

#defaultform input{
    font-family: Arial, Verdana;
    font-size: 14px;
    padding: 5px;
    border: 1px solid #b9bdc1;
    width: 300px;
    color: #797979;
    line-height: 16px;
}

这是表单的 HTML:

<form id="defaultform" class="rounded" action="<?php echo $editFormAction; ?>" method="post" name="form1">
<h3>Show Hostess: <?php echo $row_HostessName['hostess_fname'] . " " . $row_HostessName['hostess_lname']; ?></h3>
    <div class="field">
        <label for="initial_date">Initial Date:</label>
        <input class="input" type="text" name="initial_date" value="" />
        <p class="hint">Enter initial show date.</p>
    </div>
    <div class="field">
        <label for="initial_time">Initial Time:</label>
        <input class="input" type="text" name="initial_time" value="" />
        <p class="hint">Enter initial show time.</p>
    </div>
    <div class="field">
        <label for="actual_datetime">Actual/Scheduled Date and Time:</label>
        <input class="input" type="text" name="actual_datetime" value="" />
        <p class="hint">Enter actual show date and time.</p>
    </div>
    <div class="field">
        <label for="number_of_guests">Number of Guests:</label>
        <input class="input" type="text" name="number_of_guests" value="" />
        <p class="hint">Enter number of guests at show.</p>
    </div>
    <div class="field">
        <label for="show_notes">Show Notes:</label>
        <input class="input" type="textarea" name="show_notes" value="" />
        <p class="hint">Enter number of guests at show.</p>
    </div>

    <input class="button" type="submit" value="Add Show" />
<input type="hidden" name="MM_insert" value="form1" />

`

“实际/预定日期和时间”是包装的标签，让我感到悲伤。 Here正是我所看到的 fiddle 。

Answer 1

从 label 标签中移除 float 属性:

CSS:

label {
    font-family: Arial, Verdana;
    text-shadow: 2px 2px 2px #ccc;
    display: block;
    /*float: left;*/
    font-weight: bold;
    margin-right:10px;
    text-align: right;
    width: 150px;
    line-height: 25px;
    font-size: 15px;
}

这是 jsFiddle

编辑:

使标签显示在输入框左侧的最简单方法是删除 display:block从标签选择器中输入 <br />每个输入框后的标签: updated jsFiddle