html中a標籤如何設定行寬高
阿新 • • 發佈：2019-02-17
方法一：float，對a樣式盒子float:left讓它成浮動
直接演示一下了(實現下面頁面)
程式碼如下
<style>
#page{
width:120px; /* 在外面畫一個區域 */
height:700px;
}
li{
list-style:none;
}
a{
text-decoration:none; /* 去除a標籤自帶下劃線 */
color:blue;
border 這種方法的缺點是,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>