对齐div

Question

我尝试添加container和/或row div类，并尝试为所有人添加左侧位置。如何在没有css或最小css更改的行中对齐这些元素？

   <div class="container">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
        <button class="btn btn-danger" type="button">Stop - X</button>
      </span>
      <input type="text" class="form-control">
      <form method="post" action="/controller/new" class="button_to">
          <input value="New" type="submit" />
      </form>
  </div>

我希望[Go] [停止] [....] [提交]在同​​一行。演示repl

的链接

Answer 1

尝试添加这段css：

form { 
    display: inline;
}

<form> - 是一个block level元素，因此它会在自身之前和之后断开。您必须使其行为就好像它是一个内联元素来克服这个问题。

＆＃13;

＆＃13;

form {
    display: inline;
}

＆＃13;

<div class="container">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
        <button class="btn btn-danger" type="button">Stop - X</button>
      </span>
      <input type="text" class="form-control">
      <form method="post" action="/controller/new" class="button_to">
          <input value="New" type="submit" />
      </form>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的表单设置为display：block;将其更改为显示：inline-block;它会起到魅力的作用。

＆＃13;

＆＃13;

form{
display: inline-block;
}

＆＃13;

<div class="container">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
        <button class="btn btn-danger" type="button">Stop - X</button>
      </span>
      <input type="text" class="form-control">
      <form method="post" action="/controller/new" class="button_to">
          <input value="New" type="submit" />
      </form>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将display: inline-block添加到表单（.button_to）：

.button_to {
  display: inline-block;
}

您也可以使用position: left删除这些样式，因为这是不必要的。