如何通过css内联属性[duplicate]在一行中显示两个div

This question already has an answer here:

这个问题在这里已有答案:

How to place two divs next to each other? 11 answers

如何将两个div放在一起? 11个答案

I try to use css inline property to make div node display in one line, below is my code

我尝试使用css内联属性将div节点显示在一行中,下面是我的代码

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

The result is not right, the two div with class 'inline' still display in two line, and the border is display incorrect too. I don't know what happen, who can help me?

结果不对,类'内联'的两个div仍然显示在两行,并且边框也显示不正确。我不知道发生了什么,谁能帮帮我?

thanks

2 个解决方案

#1

use inline-block instead of inline. Read more information here about the difference between inline and inline-block.

使用内联块而不是内联。在此处阅读有关内联块和内联块之间差异的更多信息。

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

DEMO

#2

You don't need to use display:inline to achieve this:

你不需要使用display:inline来实现这个目的:

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

You can use float-left.

你可以使用float-left。

Using float:left is best way to place multiple div elements in one line. Why? Because inline-block does have some problem when is viewed in IE older versions.

使用float:left是将多个div元素放在一行中的最佳方法。为什么?因为在IE旧版本中查看内联块确实存在一些问题。

fiddle

#1