I try to use css inline property to make div node display in one line, below is my code
<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?
thanks
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;
}
You don't need to use display:inline to achieve this:
.inline {
border: 1px solid red;
margin:10px;
float:left;/*Add float left*/
margin :10px;
}
You can use 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.
Source: Stackoverflow.com