Question

我试图将两个表格/按钮并排。我的HTML（Bootstrap）代码如下：

<form role="form" action="delete.php" method="post">
                <div class="form-group">
                    <input type="hidden" name="delete_id" value="<?php echo $row['ID']; ?>" />
                </div>
                <button type="submit" class="btn btn-danger">Delete Post</button>
            </form>

            <form role="form" action="edit.php" method="post">
                <div class="form-group">
                    <input type="hidden" name="edit" value="<?php echo $row['ID']; ?>" />
                </div>
                <button type="submit" class="btn btn-info">Edit Post</button>
            </form>

在用户端，显示如下：

我试图在用户端并排获取它们。感谢

Answer 1

请将两个表格包装在单独的div中，或者在向左浮动后将它们封锁容器。

<div class="floatleft">
   <form role="form" action="delete.php" method="post">
      <div class="form-group">
     <input type="hidden" name="delete_id" value="" />
      </div>
      <button type="submit" class="btn btn-danger">Delete Post</button>
   </form>
</div>
<div class="floatleft">
   <form role="form" action="edit.php" method="post">
      <div class="form-group">
         <input type="hidden" name="edit" value="" />
      </div>
      <button type="submit" class="btn btn-info">Edit Post</button>
   </form>
</div>

或使表单成为块容器以解决此问题。

<form role="form" action="delete.php" method="post" class="displayblockFloatLeft">
          <div class="form-group">
         <input type="hidden" name="delete_id" value="" />
          </div>
          <button type="submit" class="btn btn-danger">Delete Post</button>
       </form>
       <form role="form" action="edit.php" method="post" class="displayblockFloatLeft">
          <div class="form-group">
             <input type="hidden" name="edit" value="" />
          </div>
          <button type="submit" class="btn btn-info">Edit Post</button>
       </form>

我建议使用第一个选项，因为代码已被清除。

Answer 2

这是通过使用显示属性（table-cell）并向每个表单添加表单类来实现此目的的一种方法。

请参阅工作示例摘录。

＆＃13;

.myForm {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="well">
    <form role="form" action="delete.php" method="post" class="myForm">
      <input type="hidden" name="delete_id" value="<?php echo $row['ID']; ?>" />
      <button type="submit" class="btn btn-danger">Delete Post</button>
    </form>
    <form role="form" action="edit.php" method="post" class="myForm">
      <input type="hidden" name="edit" value="<?php echo $row['ID']; ?>" />
      <button type="submit" class="btn btn-info">Edit Post</button>
    </form>
  </div>
</div>

＆＃13;

引导形式/按钮并排

2 个答案: