WordPress问题与ContactForm7上的div内的输入有关

Question

因此，这是我第一次使用StackOverFlow，我到处都在寻找解决此问题的解决方案，但是它们都没有帮助。

我目前正在编辑具有表单的WordPress博客上的页面。 因此，为了更易于处理，我将字段分为2个div。 在div内，我有输入，但它们未正确对齐。 我试过浮动，使用垂直对齐等，但没有任何效果。

链接 （由于信誉不佳，我无法上传图片，对此感到抱歉，并且没有摆弄任何东西）

这是div的代码：

<div class="ftdiv">
<div class="mvto">
<p><strong>Moving From</p></strong>
<hr>
<p>Address [text text-315]</p> 
<p>City [text text-315]</p>
<p>Postal Code [text text-315]</p>
<p>Apt. # [text text-315]</p>
<p>Province [text text-315]</p>
</div>

<div class="mvfrom">
<p><strong>Moving To</p></strong>
<hr>
<p>Address [text text-315]</p>
<p>City [text text-315]</p>
<p>Postal Code [text text-315]</p>
<p>Apt. # [text text-315]</p>
<p>Province [text text-315]</p>
</div>
</div>

和CSS

.ftdiv {
    width: 100%;
}

.mvto {
    float: left;
    width: 50%;
}

.mvfrom {
    float: right;
    width: 50%;
}


#wpcf7-f289-p154-o1 input {
    width: 120px;
    height: 11px;
    border-radius: 0;
    margin-left: 25px;
}

.smaller {
    font-size: 9px;
    font-style: italic;
}

#dropyear {
    margin-right: 10px;
}

请，如果有人可以帮助我，我将非常感激！

Answer 1

为了获得最佳实践，请创建一个<label>文本：

CSS

.ftdiv {
    width: 100%;
}

.mvto {
    float: left;
    width: 50%;
}

.mvfrom {
    float: right;
    width: 50%;
}


#wpcf7-f289-p154-o1 input {
    width: 120px;
    height: 11px;
    border-radius: 0;
    margin-left: 25px;
}

.smaller {
    font-size: 9px;
    font-style: italic;
}

#dropyear {
    margin-right: 10px;
}

label{
    display:inline-block;
    width: 150px; // Adjust your needs
    text-align: left;
}

HTML

<div class="ftdiv">
<div class="mvto">
<p><strong>Moving From</p></strong>
<hr>
<p><label>Address</label> [text text-315]</p> 
<p><label>City</label> [text text-315]</p>
<p><label>Postal Code</label> [text text-315]</p>
<p><label>Apt.</label> # [text text-315]</p>
<p><label>Province</label> [text text-315]</p>
</div>

<div class="mvfrom">
<p><strong>Moving To</p></strong>
<hr>
<p><label>Address</label> [text text-315]</p>
<p><label>City</label> [text text-315]</p>
<p><label>Postal</label> Code [text text-315]</p>
<p><label>Apt.</label> # [text text-315]</p>
<p><label>Province</label> [text text-315]</p>
</div>
</div>

此处演示