Question

所以这是我第一次使用StackOverFlow，我到处寻找解决这个问题的方法，但没有一个是有帮助的。

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

link（由于没有声誉，我不允许上传图片，对此抱歉并且没有小提琴）

以下是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>

<强> DEMO HERE

WordPress问题与ContactForm7上的div内输入

1 个答案: