[閒聊] 標題區塊icon與文字的對齊

看板Web_Design作者 (夏天到了，冷不起來了說)時間15年前 (2010/09/16 13:55), 編輯推噓2(2推 0噓 14→)
留言16則, 6人參與, 最新討論串1/1
<h3> <span class="icon"></span> 這是標題 </h3> span.class{ height:15px; width:15px; background-image:... display:inline-block; vertical-align:middle; } 有時候想要在標題的文字旁邊加個icon來做裝飾 不過遇上不同的瀏覽器就會有不同的對齊..會讓人頭大 像上面的效果，在FF,IE,GC都會出現不同的對齊 (不在h3上做，要為了要把span.icon做成通用的元件) 最後想了想 八成是inline-block這個屬性的關係 所以想到了一個辦法.. <h3> <span class="icon">&nbsp;</span> 這是標題 </h3> span.class{ background-image:... padding:0px 7px; } 直接忽略掉display這個屬性 在span加上padding..成個偽block 這樣所有瀏覽器就將文字與span同樣視為同樣的區塊，自己對齊了 (PS..不加 &nbsp; 的話，IE6不會顯示span..) -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.39.168.158 ※ 編輯: JYHuang 來自: 114.39.168.158 (09/16 13:55)
→
09/16 14:04, , 1F
icon直接用bg-image跟padding加在h2就好 span多餘了
09/16 14:04, 1F
→
09/16 14:05, , 2F
3
09/16 14:05, 2F
→
09/16 16:53, , 3F
我文內有說明了..要是h3已經有背景圖的話，會衝突
09/16 16:53, 3F
推
09/16 20:12, , 4F
直接用block+float:left吧 不然會出很多問題
09/16 20:12, 4F
→
09/16 20:13, , 5F
另外的方法就是<h3><span>title</span></h3>這樣也可以
09/16 20:13, 5F
→
09/16 20:14, , 6F
把span display:block之後隨你加背景了
09/16 20:14, 6F
→
09/17 00:22, , 7F
這樣也是可以...不過我是參考JQuery UI的Accordion
09/17 00:22, 7F
→
09/17 00:23, , 8F
手動把icon加入H3元件內。
09/17 00:23, 8F
→
09/17 00:23, , 9F
因為有考慮到通用性..所以會想這樣弄
09/17 00:23, 9F
→
09/17 01:11, , 10F
都有span了 考不考慮直接換<img />?
09/17 01:11, 10F
推
09/17 08:15, , 11F
標題還是用文字比較好吧~雖然不見得文字會顯示出來XD
09/17 08:15, 11F
→
09/17 12:36, , 12F
用background-image比較方便做CSS Image Sprites
09/17 12:36, 12F
→
09/17 17:13, , 13F
那如果是要侵入html層的話 我會選擇在外面包div而非內插
09/17 17:13, 13F
→
09/17 17:14, , 14F
span。你所說的原標題底圖就改設在<div>，icon用<h3> @@
09/17 17:14, 14F
→
09/17 17:27, , 15F
一般都是用<span> or <em> 啊
09/17 17:27, 15F
→
09/17 22:38, , 16F
以plug in的角度來看，用spa>對整體的架構影響最小..
09/17 22:38, 16F
‣ 更多 JYHuang 的文章
文章代碼(AID): #1CaR5BDF (Web_Design)