Question

当我尝试使用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：身体 { }

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

如果结果如下，这是一张图片：

Result of css http://i39.tinypic.com/2akbe4x.png

正如您所看到的，代码可以正常工作到“Matalternativ：”，但随后发生了一些奇怪的事情。我已经设法找出原因，因为文本需要两条道路。简单（但非常难看）的解决方案是将“.tdone”和“.tdtwo”的高度改为高于两行高度的数字，但它不是很好。

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

这提出了两个问题：

1：有理由不想要一个id，因为这对我以后未显示的代码中出现相同问题的部分代码有帮助。除了在特定元素上添加id之外，还有一个css属性可以帮助我吗？

2：如您所见，radiobuttons和checkboxes在它们填充的段落的中心对齐。我试过“text-align：left;”和“浮动：离开;”在“.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>

结果“有趣”：

Result of css http://i43.tinypic.com/11b2kvd.png

我想原因是“formarea”没有完全填充，有谁知道该怎么办？

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

CSS样式div和段落

1 个答案: