如何并排对齐两个表格？

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 。