forms - CSS - 无法让两个表单域水平并排放置

Question

我有两个表单域，我想水平并排放置 - 我使用 display:inline-block 在 css 中将它们并排放置，但第二个表单域比首先。

这是我的 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;}

希望这对您有所帮助。