多个并列同方向浮动元素高度不一致，如何解决_html/css_WEB-ITnose

<div id="header"><! --页面头部 -->        	<div id="menu">            	<ul>                	<li><a href="#">首页</a></li>                    <li class="menudiv"></li>                    <li><a href="#">博客</a></li>                    <li class="menudiv"></li>					<li><a href="#">设计</a></li>                    <li class="menudiv"></li>                    <li><a href="#">相册</a></li>                    <li class="menudiv"></li>                    <li><a href="#">论坛</a></li>                    <li class="menudiv"></li>                    <li><a href="#">关于</a></li>                 </ul>        	</div>

#menu {padding:20px 20px 0 0}	/* 固定导航栏位置 */	#menu ul {float:right;list-style:none;margin:0px;}	/* 添加float：right是的导航栏位于页面右侧 */	#menu ul li {float:left;margin:0 10px;display:block;line-height:28px;}	/* 列表向左浮动，左右间距10px */	.menudiv {width:1px;height:28px;background-color:#999}		//制作导航条时反复用到的竖线	#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666;} /* 超链接样式 */	#menu ul li a:hover{}