在網頁中實作Tab效果.jpg

為了讓 HTML 網頁中的特定內文也能有 Tab(或稱為「定位點」、「對齊」、「切齊」等)的效果,查找了一番,得使用 CSS 行內樣式的 span 來做。

但由於 span 預設無法指定寬度屬性,只會跟著文字的長度跑,若想讓寬度屬性可以起作用,必須加上 display: inline-block;

 

【範例:指定寬度300px】

width沒效果

width有效了!

 

【範例程式碼】

<p><span style="width: 300px; background-color:#FAC2C2; color:#FFF; font-weight:bold; border:#FE9CA0 solid 1px; border-radius:2px; padding: 5px 10px;">width沒效果</span></p>
<p><span style="width: 300px; display: inline-block; background-color:#FAC2C2; color:#FFF; font-weight:bold; border:#FE9CA0 solid 1px; border-radius:2px; padding: 5px 10px;">width有效了!</span></p>
arrow
arrow
    全站熱搜

    騏騏 (Elfachiy) 發表在 痞客邦 留言(1) 人氣()