怎么实现多个UL横向显示
日期：2014-05-17 浏览次数：20769 次
如何实现多个UL横向显示
要实现多个UL横向显示,并实现最后一个ul要在最又边显示,其他的在左边显示如图显示:
欢迎 主页 新闻调查 注销
就是实现上行的效果.用ul实现
------解决方案--------------------
<td> 欢迎 </td> <td> 主页 </td> <td> 主页 </td> <td> </td> <td> </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>
要实现多个UL横向显示,并实现最后一个ul要在最又边显示,其他的在左边显示如图显示:
欢迎 主页 新闻调查 注销
就是实现上行的效果.用ul实现
------解决方案--------------------
<td> 欢迎 </td> <td> 主页 </td> <td> 主页 </td> <td> </td> <td> </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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
