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>

Answer 2

あなたのフォームを表示するように設定されています。ブロック。表示するように変更してください：inline-block;それは魅力のように働くでしょう。

form{ 
 
display: inline-block; 
 
}

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

Answer 3

フォーム（.button_to）にdisplay: inline-blockを追加します。

.button_to { 
    display: inline-block; 
} 

それは不要ですので、あなたもposition: leftでのスタイルということを削除することができます。