0

Web フォーム フィールドが正しく並んでいないという問題があります。

スクリーンショットを見る: http://awesomescreenshot.com/00cw0c80e

ラベルは通常より長いですが、それだけ長くする必要があります。ラベルを短くすると、期待どおりに見つかります。

誰でも助けることができますか？

ありがとう！:)

ps。私はネットでさまざまなサンプルを見てきましたが、うまくいきません。

私のCSS

input.issu {
    margin-bottom: 8px;
    width: 220px;
}

label.issu {
    display: block;
    float: left;
    margin-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    width: 270px;
    text-align: left;
    vertical-align: top;
}

select.issu {
    margin-bottom: 8px;
    width: 240px;
}

br.issu {
    float: clear;
}

私のhtmlコード（divタグの有無にかかわらず試しました）

        <div>
        <label for="departingFrom" class="issu">Direct flight into Singapore from (please name city)<span class="red">* required</span></label>
        <input id="departingFrom" name="departingFrom" class="issu" value="" type="text">
        <br class="issu">
        </div>

        <div>
        <label for="additionalInfo" class="issu">Additional info(e.g. accompanying family members)<span class="red">* required</span></label>
        <input id="additionalInfo" name="additionalInfo" class="issu" value="" type="text">
        <br class="issu">
        </div>
4

2 に答える 2

0

ラベルのコンテナdivにoverflow:hiddenプロパティを追加し、以下のように入力します。それはうまくいきます。

CSS:

div{
    overflow:hidden
}
于 2013-02-05T07:03:14.493 に答える
0

テーブルを使用して、ラベルを 1 つの列に配置し、入力フィールドを別の列に配置します。そしてvertical-align、望み通りに細胞をセットします（このような場合の「並ぶ」とは解釈が異なります）。

于 2013-02-05T07:29:33.237 に答える