ContactForm7 上 div 内输入的 WordPress 问题

Question

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

我目前正在编辑 WordPress 博客上的一个页面，该页面有一个表单。所以，为了更容易处理，我将字段分成 2 个 div。在 div 中，我有输入，但它们没有正确对齐。我试过浮动、垂直对齐等等，但都没有用。

link（我因为没有信誉而不允许上传图片，对此感到抱歉，因为没有 fiddle）

这里是 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

ContactForm7 上 div 内输入的 WordPress 问题

WordPress issue with inputs inside divs on ContactForm7

html

css

php

wordpress

wordpress-theming