html - 并排对齐表单上的输入框

Question

我正在尝试并排对齐表单的输入文本框，但我无法这样做。请帮忙。

fiddle :here

HTML:

<p>Your Name
<br>
<span class="wpcf7-form-control-wrap your-name">
    <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
</span> 
</p>
<p>Your Email
<br>
<span class="wpcf7-form-control-wrap your-email">
    <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7- validates-as-email" aria-required="true">
</span>
</p>

CSS:

.wpcf7 input[type="text"], .wpcf7 input[type="email"] {
    background-color: #fff;
    color: #000;
    width: 50%;
}

Answer 1

http://jsfiddle.net/rHh3w/12/show

只需要将您的p 元素设置为“display:inline;”，默认情况下它们是 block 元素并且不会彼此相邻对齐。

还删除了两个br标签

p {display:inline;}