如何並排對齊兩個表格？

Question

我想要兩個並排的表格，我目前在這里展示了一個：http: //gyazo.com/093efe95337ace40fe633adb88b76c2d 。 我想在右側與左側相同的表格。

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

我該怎么做呢？

Answer 1

首先，您必須在第一個2格之前關閉表格。

然后，您可以在關閉第一個表單后添加第二個表單

您將類添加到這兩種形式

在你的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

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

我想在右側與左側相同的表格

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

演示JsFiddle 。 它具有響應性，因此當瀏覽器較小時，它將堆疊起來，否則將根據需要水平放置。 如果您不希望將其堆疊起來，那么最好使用col-xs-6而不是col-md-6 。