Question

我希望两种形式并排，我现在有一个显示：http://gyazo.com/093efe95337ace40fe633adb88b76c2d。我想在右侧使用与左侧相同的表格。

＆＃13;

.comments-section .comment-form {
  padding: 20px;
  background: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}

＆＃13;

<div class="tab-pane active" id="company-contact">
  <div class="company-profile company-contact">
    <h3>Create an Account With Us</h3>

    <form class="comment-form">

      <div>

        <div class="left">
          Username:
        </div>
        <div class="right">
          <div class="row">
            <div class="col-xs-4">
              <input type="text" required>
            </div>
          </div>
        </div>
      </div>



      <div class="left">
        Email:
      </div>
      <div class="right">
        <div class="row">
          <div class="col-xs-4">
            <input type="email" required>
          </div>
        </div>
      </div>


      <div class="left">
        Password:
      </div>
      <div class="right">
        <div class="row">
          <div class="col-xs-4">
            <input type="password" required>
          </div>
        </div>
      </div>
  </div>
</div>

</form>

＆＃13;

我该怎么做呢？

Answer 1

首先，您必须在前2个div之前关闭表单。

然后您可以在关闭第一个表单后添加第二个表单

您将这个类添加到这两个表单

在你的CSS中添加

.sideBySideForm{
display: inline-block;
}

希望对我的英语有所帮助和抱歉：）

Answer 2

您是否尝试过这样的输入框：

    <h3>Create an Account With Us</h3>

    <form class="comment-form">

        username:<input class="comment-form"  type='text' name='username' id='username'  maxlength="50" placeholder="Username" />

        email:<input class="comment-form"  type='text' name='email' id='email'  maxlength="50" placeholder="email" />

        password:<input class="comment-form"  type='text' name='password' id='password'  maxlength="50" placeholder="password" />
    </form>

Answer 3

<div class="tab-pane active" id="company-contact">
  <div class="company-profile company-contact">
    <h3>Create an Account With Us</h3>

    <form class="comment-form">


<div class="row">
  <div class="col-md-4">
      <div class="left">
          Username:
      </div>
            <input type="text" required/>
 </div>
  <div class="col-md-4">
      <div class="left">
        Email:
      </div>
      <input type="email" required/>
  </div>  

  <div class="col-md-4"> 
      <div class="left">
        Password:
      </div>
     <input type="password" required/>
   </div>
</div>
</form>
      </div>
    </div>

演示JsFiddle。它是响应性的，所以当浏览器很小时它会叠加，否则它将是你想要的水平。如果您不希望将其叠加，请更好地使用col-xs-6代替col-md-6。

如何将两个表格并排排列？

3 个答案: