首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

怎么实现多个UL横向显示

2012-02-23 
如何实现多个UL横向显示要实现多个UL横向显示,并实现最后一个ul要在最又边显示,其他的在左边显示如图显示:

如何实现多个UL横向显示
要实现多个UL横向显示,并实现最后一个ul要在最又边显示,其他的在左边显示如图显示:

欢迎   主页   新闻调查                                                                                                   注销

就是实现上行的效果.用ul实现

[解决办法]
<td> 欢迎 </td> <td> 主页 </td> <td> 主页 </td> <td> &nbsp; </td> <td> &nbsp; </td> <td> 注销
</td>
[解决办法]
<style>
#ula li{ float:left; width:70px; list-style:none;}
#ula .lilast{ width:400px; text-align:right;}
</style>
<ul id= "ula ">
<li> 欢迎 </li>
<li> 主页 </li>
<li> 新闻调查 </li>
<li class= "lilast "> 注销 </li>
</ul>
[解决办法]
<style>
#ula, #ula li { margin: 0; padding: 0; }
#ula li{ float:left; width:70px; list-style:none; display: block;}
#ula .lilast{ flort: right; }
</style>
<ul id= "ula ">
<li> 欢迎 </li>
<li> 主页 </li>
<li> 新闻调查 </li>
<li class= "lilast "> 注销 </li>
</ul>
[解决办法]
<html>
<head>
<style>
body {margin:0 auto; text-align:center}
#menu {width:720px; margin-top:20px;}
#menu ul{list-style-type:none; margin:0; float:left;}
#menu ul li{font-size:12px; float:left; padding-right:15px;}
#menu .logout ul{float:right;}
</style>
</head>
<body>
<div id= "menu ">
<ul>
<li> 欢迎 </li>
<li> 首页 </li>
<li> 新闻调查 </li>
</ul>
<div class= "logout ">
<ul>
<li> 注销 </li>
</ul>
</div>
</div>
</body>
</html>

热点排行