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

我正试图并排对齐表单的输入文本框，但无法这样做。请帮忙。
小提琴：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%;
}

最佳答案

http://jsfiddle.net/rHh3w/12/show
只需将p元素设置为“display:inline;”，默认情况下，它们是块元素，不会相邻对齐。
还删除了两个br标记

p {display:inline;}

关于html - 并排对齐表单上的输入框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20281884/