web-dev-qa-db-ja.com

css inlineプロパティを介して1行に2つのdivを表示するにはどうすればよいですか

私はCSSインラインプロパティを使用してdivノードを1行で表示しようとします、以下は私のコードです

<html>
 <head>
  <style type="text/css">
   .inline { 
    display: inline; 
    border: 1px solid red; 
    margin:10px;
    }
  </style>
 </head>
 <body>
  <div>
   <div class='inline'><div>I'm here</div></div>
   <div class='inline'><div>I'm follow</div></div>
  </div>
 </body>
</html>

結果は正しくありません。クラス 'inline'の2つのdivはまだ2行で表示され、境界線も正しく表示されません。何が起こるのか分かりません、誰が私を助けてくれますか？

ありがとう

cssinline
14
user2155362

つかいます inline-blockの代わりにinline。 inlineとinline-blockの違いについて詳しくは、こちらをご覧ください。

.inline { 
display: inline-block; 
border: 1px solid red; 
margin:10px;
}

[〜＃〜] demo [〜＃〜]

22
Suresh Ponnukalai

これを実現するためにdisplay:inlineを使用する必要はありません。

.inline { 
    border: 1px solid red;
    margin:10px;
    float:left;/*Add float left*/
    margin :10px;
}

float-leftを使用できます。

Float：leftを使用すると、複数のdiv要素を1行に配置するのに最適な方法です。どうして？インラインブロックは、IE古いバージョンで表示される場合に問題が発生するためです。

fiddle

5
Alex Char