0

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

这是所涉及元素的 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" />

`

“实际/预定日期和时间”是包装并导致我悲伤的标签。 这是我所看到的小提琴。

4

2 回答 2

0

从标签标签中删除 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放置标签：更新的 jsFiddle<br />

于 2013-02-07T02:55:12.267 回答
0

我建议您使用Flex布局。您可以使用它轻松构建布局。

是你的意思吗？

CSS：

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

#defaultform input{
    font-family: Arial, Verdana; font-size: 14px; padding: 5px; border: 1px solid #b9bdc1; width: 300px; color: #797979;
    line-height: 16px;
}
.field{
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items:center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
}

网页：

<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="" />   
    </div>
    <p class="hint">Enter initial show date.</p>
    <div class="field">
        <label for="actual_datetime">Actual/Scheduled Date and Time:</label>
        <input class="input" type="text" name="actual_datetime" value="" />
    </div>
    <p class="hint">Enter actual show date and time.</p>
</form>

这是 JsFiddle

于 2013-02-07T03:43:18.670 回答