下面是一个4*2的menubar 效果的页面
<html>
<head>
<style type="text/css">
.menubar {
background-color: grey;
}
.title {
float: left;
text-align: center;
overflow: hidden;
font-size: 1em;
width: 24%;
}
.fence {
float: left;
color: black;
width: 1px;
}
</style>
</head>
<body>
<div class="menubar">
<div class="title"><a href="#">news</a></div>
<div class="fence">|</div>
<div class="title"><a href="#">sport</a></div>
<div class="fence">|</div>
<div class="title"><a href="#">movie</a></div>
<div class="fence">|</div>
<div class="title"><a href="#">travel</a></div>
<div style="clear:both;"></div>
<div class="title"><a href="#">news</a></div>
<div class="fence">|</div>
<div class="title"><a href="#">sport</a></div>
<div class="fence">|</div>
<div class="title"><a href="#">movie</a></div>
<div class="fence">|</div>
<div class="title"><a href="#">travel</a></div>
<div style="clear:both;"></div>
</div>
</body>
</html>