CSS - 无法让两个表单字段水平相邻答案

【问题标题】：CSS - Can't get two form fields to sit next to each other horizontallyCSS - 无法让两个表单字段水平相邻
【发布时间】：2014-05-31 10:43:42
【问题描述】：

我有两个表单域，我希望它们水平并排放置 - 我使用 css 中的 display:inline-block 让它们彼此相邻，但第二个表单域略低于首先。

这是我的 CSS：

.mu_register #first_name, .mu_register #last_name {
width: 47%;
font-size: 24px;
margin: 5px 5px 0px 0px;
display: inline-block;
float: left;
position: relative;
}

整个表单的输出 HTML 如下：

<form id="setupform" method="post" action="http://www.skizzar.com/signup-d72/">
    <input type="hidden" name="stage" value="validate-user-signup" />
    <input type='hidden' name='signup_form_id' value='1255869724' />
    <input type="hidden" id="_signup_form" name="_signup_form" value="c914fb64da" />        
<label for="user_name">Username:</label>
    <input name="user_name" type="text" id="user_name" value="" maxlength="60" /><br />(Must be at least 4 characters, letters and numbers only.)
<label for="user_email">Email&nbsp;Address:</label>
    <input name="user_email" type="text" id="user_email" value="" maxlength="200" /><br />We send your registration email to this address. (Double-check your email address before continuing.) 
<label for="first_name">First Name</label>
    <input name="first_name" type="text" id="first_name" value="" maxlength="60" />
<label for="last_name">Last Name</label><input name="last_name" type="text" id="last_name" value="" maxlength="60" />

    <p><input id="signupblog" type="hidden" name="signup_for" value="blog" /></p>

    <p class="submit"><input type="submit" name="submit" class="submit" value="Next" /></p>
</form>

以及问题的截图：

【问题讨论】：

也给vertical-align: top。
HTML 怎么样？需要完整的相关代码。
是的 - HTML 也会很好。
抱歉，请参阅上面的 HTML

标签： forms alignment textfield css

【解决方案1】：

在等待您发布您的 HTML 时，我快速创建了这个 fiddle。

尝试添加将表单输入和标签放入名为 rows 和 columns 的 div 中。这就是我现在构建所有表单的方式。

<div class="row">
<div class="col">
<span class="label1">First Name</span><input type="Textbox"/>
</div>

<div class="col">
<span class="label1">Last Name</span><input type="Textbox"/>
</div>
</div>

<div class="row">
<div class="col">
<span class="label1">Another Field</span><input type="Textbox"/>
</div>

<div class="col">
<span class="label1">Another Field</span><input type="Textbox"/>
</div>
</div>

然后我按照以下几行使用 CSS 对其进行样式设置：

.col
{
    float: left;
    width: 20%;
    font-size: 24px;
    padding: 15px;
}


.row{

    padding: 5px 5px; 
    height: auto;
    overflow: auto;
}

input
{ padding: 5px; 
  width: 150px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}

希望这会有所帮助。

【讨论】：

【解决方案2】：

将.mu_register #first_name, .mu_register #last_name { 更改为

.mu_register #first_name, #last_name {

查看Fiddle

我猜应该可以的

【讨论】：