なぜ表示されないのですか：インラインでdivを横並びに配置していますか？

私はページ全体のコンテナとして使用している大きなdiv内に2つのdivを持つ単純なページを作成しようとしています。これを行うために私はdivsのためにdisplay: inlineを使用していますが、私がこれを行うときにはすべてがちょうどそれ自体を破壊します。 divは（一瞬、私は避けるようにしようとしているブートストラップの使用せずに）右お互いに産卵することの別の方法があるかどうなぜ表示されないのですか：インラインでdivを横並びに配置していますか？

div { 
 
    margin: auto; 
 
    border: 2px solid black; 
 
    border-radius: 10px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 
#container { 
 
    width: 95%; 
 
    min-height: 620px; 
 
} 
 
#options, #forms { 
 
    display: inline; 
 
} 
 
h1 { 
 
    text-align: center; 
 
}

<body> 
 
    <div id="container"> 
 
     <h1>BANCO DE LA NACION</h1> 
 
     <hr> 
 
     <div id="options"> 
 
      <h3>Eliga su operación:</h3> 
 
      <input type="button" name="crear" id="creacion" value="Crear nueva cuenta"> 
 
      <input type="button" name="mostrar" id="mostrador" value="Mostrar datos"> 
 
     </div> 
 
     <div id="forms"> 
 
     </div> 
 
    </div> 
 
</body>

私は思ったんだけどかで私がやっているやり方は正しいです、それは私の間違いですか？

出典

2016-08-11 Yacomini

は、なぜあなたは 'ディスプレイを使用している：で、それらの間の読むの違いは？ divは 'block'要素です。 –

@AbhishekPandeyまあ、今はCSSとjavascriptを学んでいます。 divsを参照するときに私はwouldisplay：inline-blockを使うべきですか？ – Yacomini

'display：inline-block'の代わりに' float：left' ...を使用してください： –

インラインの代わりにインラインブロックを使用します。 divのためのinline`：

What is the difference between display: inline and display: inline-block?

CSS display: inline vs inline-block

出典

2016-08-11 13:52:25

ありがとうございました！これは実際に多くの助けとなりました。 – Yacomini

@ Yacominiあなたの大歓迎です。良いロック。 –

私は新しい問題がありましたが、それはsintaxエラーでした！申し訳ありませんが、あなたは本当に正しい回答でした。 – Yacomini

インラインブロックにインラインブロックを変更します。

出典

2016-08-11 13:44:01 RussAwesome

これは機能します！この2つの違いは何ですか？ – Yacomini

*インライン要素はその前後に改行がなく、その横にあるHTML要素を許容します。 *ブロック要素の上下に空白があり、その隣のHTML要素は使用できません。 *インラインブロック要素は、隣接するコンテンツと同じ行にあるインライン要素として配置されますが、ブロック要素として動作します。 – RussAwesome

なぜ表示されないのですか：インラインでdivを横並びに配置していますか？

答えて

関連する問題