简体   繁体   English

如何并排对齐两个表格?

[英]How can I align two forms side by side?

I would like two forms side by side, I currently have one shown here: http://gyazo.com/093efe95337ace40fe633adb88b76c2d .我想要两个并排的表格,我目前在这里展示了一个: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?我该怎么做呢?

First of all, you have to close your form before your first 2 div. 首先,您必须在第一个2格之前关闭表格。

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 在你的CSS中添加

.sideBySideForm{
display: inline-block;
}

Hope it helps and sorry for my english :) 希望对您有所帮助,对不起我的英语:)

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>

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

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

<\/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> ,将第二个块向右推

    1. 如果您想要相同的表单,但需要两个不同的操作,您的代码可以类似于:<\/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>"
<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 . 演示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 . 如果您不希望将其堆叠起来,那么最好使用col-xs-6而不是col-md-6

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM