Html CSS样式化div和段落

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

HTML:

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

正如您所看到的，代码在“Matalternativ:”下运行良好，但随后发生了一些奇怪的事情。我已经设法弄明白，这是因为文本需要两条道路。简单（但非常丑陋）的解决方案是将“.tdone”和“.tdtwo”的高度增加到两行高度以上的数字，但这不是很好

我还试着玩弄溢出属性，但这似乎对我没有帮助

这就产生了两个问题：

1：不需要id是有原因的，因为这对我以后在代码中没有显示的部分不会有帮助，同样的问题也会出现。除了在特定元素上放置id外，当一行太高时，是否有css属性可以帮助我

2：如您所见，单选按钮和复选框在它们填充的段落的中心对齐。我试过“文本对齐：左”和“浮动：左；“内部”.tdtwo-input”，但没有任何区别。有没有办法让这一段向左移动

---

编辑：

在添加@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>

Gäst：
个人支持者：
要解决对齐问题，您需要使用如下
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;
}

你为什么不使用标签？你可以看看我上面的编辑，看看为什么我的新部件在样式上给了我新的错误。没关系，我只记得“溢出：自动
.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 */
}

input[type="radio"],
input[type="checkbox"] {
    width: auto;
}