方法一：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{
/* 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>