0

CSS を使用してスタイルを設定しようとすると、2 つの問題が発生するページがあります。最初のコード：

HTML:

<div class="formarea">

    <div class="formimg">Du själv:</div>

    <div class="formtext">

        <p class="inhead">Personuppgifter:</p>

        <p class="tdone" id="namespan">Namn</p>     <p class="tdtwo"><input type="text" name="graduate[name]" id="name" /></p>
        <p class="tdone" id="addrspan">Adress</p>       <p class="tdtwo"><input type="text" name="graduate[address]" id="address" /></p>
        <p class="tdone" id="postspan">Postadress</p>   <p class="tdtwo"><input type="text" name="graduate[postal]" id="postal" /></p>
        <p class="tdone" id="mailspan">E-post</p>       <p class="tdtwo"><input type="text" name="graduate[email]" id="email" /></p>
        <p class="tdone" id="phonspan">Mobilnummer</p>  <p class="tdtwo"><input type="text" name="graduate[phone]" id="phone" /></p>
        <p class="tdone" id="pnrspan">Personnummer</p>  <p class="tdtwo"><input type="text" name="graduate[pnr]" id="pnr" /></p>

        <p class="inhead">Matalternativ:</p>            

        <p class="tdone">Vegetarian (vegan etc. fyll även i detta nedan)</p><p class="tdtwo"><input type="checkbox" name="graduate[veg]" value="Ja" /></p>
        <p class="tdone">Allergier och andra matpreferenser</p><p class="tdtwo"><textarea name="graduate[allergies]" id="allergies"></textarea></p>

        <p class="inhead">Alkoholalternativ:</p>

        <p class="tdone">Öl</p><p class="tdtwo"><input type="radio" name="graduate[drink]" value="Öl" checked /></p>
        <p class="tdone">Cider</p><p class="tdtwo"><input type="radio" name="graduate[drink]" value="Cider" /></p>
        <p class="tdone">Alkoholfritt</p><p class="tdtwo"><input type="checkbox" name="graduate[alcfree]" value="Ja" /></p>
    </div>
</div>

CSS: body { }

.formarea {
    margin:auto;
    margin-top:25px;
    padding:0px;
    border:none;
    width:364px;
    position:relative;
    background-color:#eeeeee;
}

.formimg {
    margin-top:0px;
    margin-left:0px;
    padding:0px;    
    border:none;
    width:45px;
    height:45px;
    background-color:#dddddd;
}

.formtext {
    margin-top:-45px;
    margin-bottom:0px;
    margin-left:64px;
    padding:0px;
    border:none;
    width:300px;
    float:left;
    clear:both;
    background-color:#cccccc;
}

.inhead {
    margin-top:0px;
    margin-bottom:2px;
    padding:0px;
    border:none;
    width:300px;
    font-size:20px;
}

.tdone {
    margin-top:2px;
    margin-bottom:2px;
    padding:0px;
    width:150px;
    float:left;
    text-align:left;
}

.tdtwo {
    margin-top:2px;
    margin-bottom:2px;
    padding:0px;
    width:150px;
    float:left;
    text-align:left;
}

.tdtwo input {
    margin-top:0px;
    margin-bottom:0px;  
    width:150px;
}

.tdtwo textarea {
    margin-top:0px;
    margin-bottom:0px;
    width:150px;
}

結果の場合の写真は次のとおりです。

cssの結果

ご覧のとおり、コードは "Matalternativ:" まで正常に動作しますが、その後で奇妙なことが起こります。この理由は、テキストに 2 つの道路が必要なためであることがわかりました。簡単な (しかし非常に醜い) 解決策は、".tdone" と ".tdtwo" の高さを 2 行の高さよりも高くすることですが、あまり良い方法ではありません。

また、overflow プロパティをいじってみましたが、役に立たなかったようです。

これにより、次の 2 つの疑問が生じます。

1: id が必要ないのには理由があります。これは、後で同じ問題が発生する、ここに示されていないコードの部分で役に立たないからです。その特定の要素にIDを付ける以外に、行が高すぎるときに役立つcssプロパティはありますか?

2: ご覧のとおり、ラジオボタンとチェックボックスは、入力する段落の中央に配置されています。「text-align:left;」を試してみました および「Float:left;」違いはありませんでした。段落の左に移動する方法はありますか?

編集：

@tw16 :s answer を追加した後、残りの HTML を追加しました。

<?php for($i=1; $i<4; $i++): ?>
    <div class="formarea">
        <div class="formimg">Gäst <?php echo $i; ?>:</div>

        <div class="formtext">

            <p class="inhead">Personuppgifter:</p>

            <p class="tdone" id="namespanG<?php echo $i; ?>">Namn</p><p class="tdtwo"><input type="text" name="guest[<?php echo $i; ?>][name]" id="nameG<?php echo $i; ?>" /></p>

            <p class="inhead">Matalternativ:</p>    

            <p class="tdone">Vegetarian (vegan etc. fyll även i detta nedan)</p><p class="tdtwo"><input type="checkbox" name="guest[<?php echo $i; ?>][veg]" value="Ja" /></p>
            <p class="tdone">Allergier och andra matpreferenser</p><p class="tdtwo"><textarea name="guest[<?php echo $i; ?>][allergies]" id="allergiesG<?php echo $i; ?>"></textarea></p>

            <p class="inhead">Alkoholalternativ:</p>

            <p class="tdone">Öl</p><p class="tdtwo"><input type="radio" name="guest[<?php echo $i; ?>][drink]" value="Öl" checked /></p>
            <p class="tdone">Cider</p><p class="tdtwo"><input type="radio" name="guest[<?php echo $i; ?>][drink]" value="Cider" /></p>
            <p class="tdone">Alkoholfritt</p><p class="tdtwo"><input type="checkbox" name="guest[<?php echo $i; ?>][alcfree]" value="Ja" /></p>

        </div>
    </div>
<?php endfor; ?>

<div class="pbutton"><input type="submit" value="Anmäl dig" /></div>

結果は「興味深い」でした：

cssの結果

その理由は、「formarea」が完全に満たされていないためだと思いますが、どうすればよいか知っている人はいますか?

4

1 に答える 1

1

アリングメントの問題を修正するには、次のように使用する必要がありclear: leftます。

.inhead {
    margin-top:0px;
    margin-bottom:2px;
    padding:0px;
    border:none;
    width:300px;
    font-size:20px;
    clear: left /* add this */
}

.tdone {
    margin-top:2px;
    margin-bottom:2px;
    padding:0px;
    width:150px;
    float:left;
    text-align:left;
    clear: left /* add this */
}

ラジオとチェックボックスの入力が中央揃えにならないようにするには、次のルールを CSS の最後に追加する必要があります。

input[type="radio"],
input[type="checkbox"] {
    width: auto;
}
于 2013-08-24T17:35:02.677 に答える