今天就遇到了這么一個效果，代碼原理比較簡單就是圖片float:left;，但是如果在做一個比較復雜的模板時，有可能遇到很多問題，使標題文字不能和圖片對齊。

今天遇到一個問題，錯誤效果如下

正確顯示應為：

因為我看過代碼，圖片float: left; 文字為正常格式。沒有任何問題。

這里代碼涉及到 html 和 css 多個元素的定義，比較復雜，就不貼出代碼了。

首先，我們要判斷一下問題，右擊需要查看的部分 (我使用的是 Chrome 瀏覽器) ，點擊 "審查元素" 。

或者我們可以再CS4中看一下

這個地方藍色的邊框就是 <h3> 的 padding ，那么上下的應該就是 margin 了，我們只要把 h3 的 padding 和 margin 設為0，就靠譜了。

設置完成后如下圖

達到我們想要的效果了，關鍵是去邊框。

如果在設計模板的時候出現文字就是對不齊了，就需要去看看他哪里出現空白，或者可以消除空白來達到對齊的效果。

也可以再css中加入如下代碼解決

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表