ul li排版 左右对齐

定义两个ul的class， 一个向左浮动， 一个向右浮动

#navtop{
      width:100%;
      height:46px;
      background-color:#ecf0f1;
      text-align:center;
      overflow:hidden;
}

.navtop-skin li {
	float:left;
	margin:0px;
	padding:0 20px;
	/*position:relative;
	right:20%;*/
	margin-left:20px;
				
	line-height:40px;
	border:solid 0px #000;
}
.navtop-right{
	float:right;
	position:relative;
	right:9%;
}				

 

网页元素

<div id="navtop">
	<ul class="navtop-skin">
		<li>						 
			<font color="#2c3e50"><strong>| Server Info.|</strong></font>      
			<input type="text" placeholder="Search" name="selectitem" id="selectitem" title="Input IP;Name;Usage;Manager"  οninput="javascript:goto(${usersession.hasPrivilegeByName("Server Info.")})"  style="color:#95a5a6; padding-left:5px;border-radius:5px;  width:160px; height:30px; vertical-align:middle;">
		</li> 
	</ul>
	 <ul class="navtop-right">
		 <li >						
		　　<a href="/portal/server/importExec" title="Data Download">
			<img src="${pageContext.request.contextPath}/style/images/excel6.jpg"   width=20px height=20px style="padding-top:15px"/>
		　　</a>
		 </li> 
	 </ul>
</div>

 

转载于:https://www.cnblogs.com/wujixing/p/5947965.html