Menu
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
446
You can use display: inline to put the two div elements inline. Explanation: div elements are block elements, so their display style is usually display: block . You can wrap both the div elements in a span tag. Explanation: span works the same way as the div , to organize and group elements.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
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
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
