How can I align two forms side by side?

Question

I would like two forms side by side, I currently have one shown here: http://gyazo.com/093efe95337ace40fe633adb88b76c2d . I would like on the right hand side the same form that is on the left.

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

 <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>

How would I go about doing this?

Answer 1

First of all, you have to close your form before your first 2 div.

Then you can add a second form just after you closed the first one

You add a class to those 2 form

In you css you add

.sideBySideForm{
display: inline-block;
}

Hope it helps and sorry for my english :)

Answer 2

Have you tried putting you input boxes like this:

    <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

首先，您必须指定您的意思是什么

我想在右侧与左侧相同的表格

<\/blockquote>

在详细介绍之前，我遇到了类似的问题，我发现在 html 代码中使用两个连续的形式对我不起作用。

对于您的情况，有两种可能性：

1. 如果两个表单具有相同的action<\/code> （php 操作文件）：<\/li><\/ol>

   在这里，您只需使用带有重复输入的单个表单即可拥有这样的方案

   <form action = 'youraction.php'> <div class='insameline'> <input >username <\/input> <input >username <\/input>  <div class='insameline'> <input >email <\/input> <input >email <\/input>  <div class='insameline'> <input >password <\/input> <input >password <\/input>  <\/form><\/code><\/pre>
   然后你可以使用你的propoer样式，或者另外使用
   div.insameline { display: inline-block margin-block-end: 0.83em; }<\/code><\/pre>
   您可以以很大的价值操纵margin-block-end<\/code> ，将第二个块向右推
   
           
           
           
    
            
   如果您想要相同的表单，但需要两个不同的操作，您的代码可以类似于：<\/li><\/ol>
    <form action = 'youraction.php'> <div class='insameline'> <input >username <\/input> <input formaction='yourotheraction.php'>username <\/input>  <div class='insameline'> <input >email <\/input> <input formaction='yourotheraction.php'>email <\/input>  <div class='insameline'> <input >password <\/input> <input formaction='yourotheraction.php'>password <\/input>  <\/form><\/code><\/pre>"
    
           

Answer 4

<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>

Demo JsFiddle . It is responsive so when the browser is small it will stack up otherwise it will be horizontal as you wanted. If you don't want it to be stacked up then better use col-xs-6 instead of col-md-6 .