使用float:left来实现横排的列表框

来源:互联网 发布:黑暗之魂3白色头发数据 编辑:程序博客网 时间:2024/05/21 10:31

很多网站上都有导读的列表框,如:

用css中的float可以来实现这个目标。

<html>

<head>

<style type=”text/css”>

body{margin:0px;    padding:0px;}

div#page{width:900px;    height:1500px;    margin-left:auto;

margin-right:auto;    background-color:white;    border:1px solid black;   font-size:13px;}

ul#sy{position:absolute;    left:800px;    padding:0px;}

li.swzye{float:left;    border-left-style:solid;}

</style>

</head>

<body>

<div id=”page”>

<ul id=”shouye”>

<li>设为主页</li>

<li>收藏本站</li>

<li>手机版</li>

<li>桌面版</li>

<li>广告投放</li>

<li>反馈</li>

</ul>    </div>    </body> </html>

但是这个呈现出来的结果却是不尽人意的,全部给凑到了一块了,如:

经过不断的试验和查阅相关资料,最终改掉一个地方后,就实现了这个目标。

就是将 sy 和swzy里面相关的属性改变下,准确的代码是:

。。。。。。。。。。。。。阅读全文,请参阅:K.N.J的博客

 

 

原创粉丝点击