生活随笔
收集整理的這篇文章主要介紹了
html中a标签如何设置行宽高
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方法一：float，對a樣式盒子float:left讓它成浮動
直接演示一下了(實現下面頁面)
代碼如下
<style>#page{width:120px; height:700px;}li{list-style:none;}a{text-decoration:none; 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{height:700px; */}li{list-style:none;}a{text-decoration:none; 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>
轉載于:https://www.cnblogs.com/wangqilong/p/9417584.html
總結
以上是生活随笔為你收集整理的html中a标签如何设置行宽高的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
