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>

此處演示