方法一：float，对a样式盒子float:left让它成浮动
直接演示一下了(实现下面页面)
代码如下
<style>#page{width:120px; /* 在外面画一个区域 */height:700px;}li{list-style:none;}a{text-decoration:none; /* 去除a标签自带下划线 */color:blue;border:1px solid #999;background-color: #F0F0F0;text-align:center;margin:2px 5px;float:left; /* 设置浮动 */width:80px;height:20px;}
</style><body><div id="page"><ul><li><a href="#">电脑硬件</a></li><li><a href="#">手机报价</a></li><li><a href="#">数码产品</a></li><li><a href="#">办公用品</a></li><li><a href="#">化妆品</a></li><li><a href="#">流行服饰</a></li><li><a href="#">家居用品</a></li></ul></div>
</body>
</html>这种方法的缺点是,a浮动了，可能会照成与其它文字内容重叠，或者整个页面布局会变化,如下图
这时可以采取在整个a标签外画一个区域，上面代码中有注释
方法二：对a标签样式加display:block;或者display:inline-block;加后实现成块状属。
代码如下
<style>#page{/* width:120px; /* 在外面画一个区域 */height:700px; */}li{list-style:none;}a{text-decoration:none; /* 去除a标签自带下划线 */color:blue;border:1px solid #999;background-color: #F0F0F0;text-align:center;margin:2px 5px;display:inline-block; /* 行标签属性改为块属性 */width:80px;height:20px;}
</style><body><div id="page"><ul><li><a href="#">电脑硬件</a></li><li><a href="#">手机报价</a></li><li><a href="#">数码产品</a></li><li><a href="#">办公用品</a></li><li><a href="#">化妆品</a></li><li><a href="#">流行服饰</a></li><li><a href="#">家居用品</a></li></ul></div>
</body>
</html>
