We would like to know how to align items left and right on navbar.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.topbar {<!-- w ww . java 2 s.c o m-->
width: 100%;
max-width: 960px;
margin: 0 auto;
list-style: none;
padding: 0;
background: #CCC;
}
.topbar::after {
content: "";
display: block;
clear: both;
}
.topbar>li {
display: inline-block;
padding: 2px 10px;
margin: 0 2px;
background: #BBB;
cursor: pointer;
}
.topbar>li:first-child {
margin-left: 0;
}
.topbar>li:hover {
background: #AAA;
}
.search {
float: right;
width: 120px;
padding: 2px 10px;
background: #888;
}
</style>
</head>
<body>
<br />
<ul class="topbar">
<li>One</li>
<li>Two</li>
<li>Three</li>
<div class="search">Search</div>
</ul>
</body>
</html>
The code above is rendered as follows: