關於html元素的 width屬性無效果的解決方法

1.關於元素的 width屬性無效果 先運行下程式看下: [html] 123 [/html] 可以看到 span會自動根據包含的內容來變化寬度 這是因為:對於內聯元素(可以是預設即為內聯的例如 span 元素，也可以是 1.關於元素的width屬性無效果
先執行下程式看下:

提示：您可以先修改部分程式碼再執行

可以看到span會自動根據包含的內容來變化寬度
這是因為:對於內聯元素(可以是預設即為內聯的例如span 元素，也可以是display: inline 的元素)
width 和height 只在IE5.x 下和IE6 或更新版本的quirks 模式下觸發hasLayout 。而對於 IE6，如果瀏覽器運行於標準相容模式下，內聯元素會忽略 width 或 height 屬性，所以設定 width 或 height 不能在此種情況下下令該元素具有 layout。
具有「layout」 的元素如果同時也display: inline ，那麼它的行為就和標準中所說的inline-block 很類似了：在段落中和普通文字一樣在水平方向和連續排列，受vertical-align 影響，並且大小可以根據內容自適應調整。這也可以解釋為什麼單單在IE/Win 中內聯元素可以包含區塊級元素而少出問題，因為在別的瀏覽器中display: inline 就是內聯，不像IE/Win 一旦內聯元素擁有layout 還會變成inline-block。
解決方法:
<1>去掉ASP.NET頁面的W3C標準宣告(不建議):

123
<2>推薦:
如果設定display:block，width屬性生效，但是此時的span跟p一樣了。
如果設定display:inline-block，則span並列在同行，而且width屬性生效。

元素display屬性的常見值說明：
block：區塊物件的預設值。將物件強製作為區塊物件呈現，為物件之後新增一行。
inline：內聯物件的預設值。將物件強製作為內聯物件呈現，從物件中刪除行。 (內嵌)《CSS權威指南》中文字顯示:任何不是區塊級元素的可見元素都是內嵌元素。其表現的特性是「行佈局」形式，這裡的「行佈局」的意思是說其表現形式總是以行進行顯示。例如，我們設定一個內聯元素border-bottom:1px solid #000;時其表現是以每行重複，每一行下方都會有一條黑色的細線。假如是塊級元素那麼所顯示的的黑線只會在塊的下方出現。
inline-block：將物件呈現為內聯對象，但是物件的內容作為區塊物件呈現。旁邊的內聯物件會被呈現在同一行內。
non：隱藏物件。與 visibility 屬性的hidden值不同，其不為被隱藏的物件保留其物理空間。
內聯(display:inline;)元素不能設定寬高，因為內聯屬於行佈局，其特性是在一行裡進行佈局，所以不能被設定寬高。
123

<3>如果設定float :left | right,width屬性生效.
(浮動)他使得指定元素脫離普通的文檔流而產生的非凡的佈局特性。而FLOAT必需應用在區塊級元素之上，也就是說浮動並不應用於內嵌標籤。或者換句話說當應用了FLOAT那麼這個元素將被指定為區塊級元素。
123
2.Css display：inline屬性與float的區別
#Display：inline；屬性的作用就是讓區塊級元素變成行內元素，像是p這樣的，設定inline屬性以後，就會不再單獨佔據一行的位置了。不過使用float 屬性頁同樣可以實現這樣的效果。 （關於行內元素和區塊級元素請看行內元素和區塊級元素）
當元素設定成為inline屬性，變成行內元素以後，設定width屬性也就沒有效果了。
看完display：inline對區塊級元素的影響以後，我們再來看看float對行內元素的影響
也就是當行內元素設定float屬性以後，其實他已經認為他是區塊級元素了，可以設定width屬性了

以上是關於html元素的 width屬性無效果的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！