0

当我尝试使用 CSS 设置样式时，我有一个页面给我带来了两个问题。首先是代码：

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:”下运行良好，但随后发生了一些奇怪的事情。我设法弄清楚这是因为文本需要两条路。简单（但非常难看）的解决方案是将“.tdone”和“.tdtwo”的高度增加到两行高度以上的数字，但这不是很好。

我也尝试过使用溢出属性，但这似乎对我没有帮助。

这提出了两个问题：

1: 不想要一个 id 是有原因的，因为这不会帮助我稍后在此处未显示的部分代码中会出现相同的问题。当行太高时，除了在该特定元素上放置一个 id 之外，是否有一个 CSS 属性可以帮助我？

2：如您所见，单选按钮和复选框在它们填充的段落的中心对齐。我试过“文本对齐：左；” 和“浮动：左；” 在“.tdtwo 输入”里面没有任何区别。有没有办法在段落中向左移动？

编辑：

在我添加 @tw16 :s 答案后，我添加了 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

要解决 alingment 问题，您需要使用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 回答