CSS - 无法将两个表单字段水平放置在一起

Question

我有两个表格字段，我希望水平放置在彼此旁边 - 我已经使用显示将它们彼此相邻：css中的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>

该问题的截图：

Answer 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;}

希望这有帮助。

Answer 2

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

.mu_register #first_name, #last_name {

查看Fiddle

这应该可行我猜