We would like to know how to place DIVs from left to right.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul.menubar {<!-- w w w. ja v a 2s . c o m-->
height: 20px;
width: 400px;
background: red;
}
ul.menubar>li {
float: left;
width: 98px;
margin: 1px;
height: 100px;
text-align: center;
background: rgba(200, 200, 200, .75);
}
</style>
</head>
<body>
<ul class='menubar'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
The code above is rendered as follows: