Question

如何设置css使两个文本框显示在同一行？

如何设置css使First Name和Email文本输入框，显示在同一行，一个在左边，一个在右边？

<div class="prayer-form">
<p><label><input class="prayer-type" type="radio" name="prayer-type" value="prayer" checked="checked" />Pray</label><label><input class="prayer-type" type="radio" name="prayer-type" value="praise" />Praise</label></p>
<textarea class="prayer-request"></textarea>
<p>First Name<input class="prayer-first-name" type="text" /></p>
<p>Email<input class="prayer-email" type="text" /></p>
<p class="prayer-submit"><a class="agreement" href="javascript: void(0);">Agreement</a><input type="button" value="Submit" /></p>
</div>

Answer 1

1、使用display的inline属性，代码如下。

2、通过设置float来让Div并排显示，代码如下。

3、、对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面。代码如下。

4、然后这样就可以实现设置css使两个文本框显示在同一行了。

Answer 2

<div class="prayer-form">
<p><label><input class="prayer-type" type="radio" name="prayer-type" value="prayer" checked="checked" />Pray</label><label><input class="prayer-type" type="radio" name="prayer-type" value="praise" />Praise</label></p>
<textarea class="prayer-request"></textarea>
<br/>
<div style="display:inline;">
First Name<input class="prayer-first-name" type="text" />
Email<input class="prayer-email" type="text" />
</div>
<p class="prayer-submit"><a class="agreement" href="javascript: void(0);">Agreement</a><input type="button" value="Submit" /></p>
</div>

追问

谢谢，如果不去掉，只用css,可以做到吗？

追答

First Name

Email

这样。由于你div中没有再封装一层。最好在加一层div。
每一行要一个div。

Answer 3

<div class="prayer-form">

<p><label><input class="prayer-type" type="radio" name="prayer-type" value="prayer" checked="checked" />Pray</label><label><input class="prayer-type" type="radio" name="prayer-type" value="praise" />Praise</label></p>
<textarea class="prayer-request"></textarea>
<br/>
<div style="display:inline;">
First Name<input class="prayer-first-name" type="text" />
Email<input class="prayer-email" type="text" />
</div>
<p class="prayer-submit"><a class="agreement" href="javascript: void(0);">Agreement</a><input type="button" value="Submit" /></p>
</div>

Answer 4

你好，代码如下：
<div class="prayer-form">
<p><label><input class="prayer-type" type="radio" name="prayer-type" value="prayer" checked="checked" />Pray</label><label><input class="prayer-type" type="radio" name="prayer-type" value="praise" />Praise</label></p>
<textarea class="prayer-request"></textarea>
<br/>
<div style="display:inline;">
First Name<input class="prayer-first-name" type="text" />
Email<input class="prayer-email" type="text" />
</div>
<p class="prayer-submit"><a class="agreement" href="javascript: void(0);">Agreement</a><input type="button" value="Submit" /></p>
</div>