html - 在 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][Stop][ .... ][Submit]。演示链接 repl

Answer 1

尝试添加这段css:

form { 
    display: inline;
}

<form> - 是 block level元素，因此它会在自身前后换行。您必须使其表现得像一个内联元素才能解决这个问题。

form {
    display: inline;
}

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