如何通过 css inline 属性在一行中显示两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25037084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display two div in one line via css inline property
提问by user2155362
I try to use css inline property to make div node display in one line, below is my code
我尝试使用 css inline 属性使 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?
结果不对，两个class为'inline'的div仍然显示在两行，边框也显示不正确。不知道怎么回事，谁能帮帮我？
thanks
谢谢
回答by Suresh Ponnukalai
use inline-blockinstead of inline. Read more information here about the difference between inline and inline-block.
使用inline-block代替inline. 在此处阅读有关内联和内联块之间区别的更多信息。
.inline {
display: inline-block;
border: 1px solid red;
margin:10px;
}
回答by Alex Char
You don't need to use display:inlineto 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 元素的最佳方式。为什么？因为 inline-block 在 IE 旧版本中查看时确实存在一些问题。
