0

フォーム ウィンドウの 2 行目に折り返される入力ボックスの説明ラベルが付いたフォームがあります。これ自体は問題ありませんが、ラベルの下部ではなく上部に位置合わせされているように見えるため、入力ボックスがめちゃくちゃになってしまいます。問題は、入力ボックスをラベルの下部に揃えるにはどうすればよいかということです。

関連する要素の 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、ラベルセレクターから削除し、<br />各入力ボックスの後にタグを配置することです。更新されたjsFiddle

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

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="" />   
    </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 に答える