無法設定寬度的完美解決方案!

2021-06-28 07:34:46 字數 1592 閱讀 5956

在預設的情況下,利用css樣式對span進行寬度設定是無效,但有時為了某種排版的要求,需要對span進行寬度設定,那麼如何在html中利用css樣式設定span的寬度?

思路:這看上去是個很簡單的問題,似乎用style中的width屬性就可以。

然而通過試驗以後發現,無論是在firefox還是ie中都無效。

在css2的標準中,查閱關於width的定義,我們可以發現,原來css中的width屬性並不總是有效的,如果物件是inline物件,width屬性就會被忽略。firefox和ie都遵循了這個標準。

1、初步解決span寬度方案

修改span為block型別。在span的css中增加display屬性,將span設定為block型別。

span

這樣寬度就可以實現了,不過這樣做也把前後文字隔在不同行裡面。這樣其實span就完全變成了div。

2、進一步解決span寬度方案

然後我們再增加乙個css屬性float,這樣的確在某種條件下能解決問題。

span

但如果span前面沒有文字,那的確是可行的。但是如果有了,前後文字就會連在一起,而span跑到了第二行。

其實,在html的各種element中,的確有既是inline,又能夠設定寬度的情況存在。例如button物件,就可以很好的在文字中間出現,並且設定寬度。

能不能讓span象button那樣顯示呢?通過css2標準中display的定義和inline物件的解釋,發現css2標準的制定者把所有的element在是否屬於inline上做了非此即彼的規定,要麼是inline,要麼是block,沒有制定button那樣既是inline,又可以象block那樣設定寬度的屬性值。

在css2.1標準草案中display的定義中增加了乙個叫inline-block的屬性值,針對的恰好是我們面對的這種情形。那麼再看看各種瀏覽器的對應情況。

firefox:通過display的文件了解到,inline-block在未來的firefox 3中會實現。通過mozllia擴充套件屬性參考了解到,在firefox 3以前的版本,例如現在的firefox 2中,可以用-moz-inline-box達到同樣的效果。

ie:通過msdn中的display文件了解到,inline-block已經實現。實際測試發現ie 6.0以後都沒問題。

3、完美的解決span寬度方案

下面**的css定義完美解決了span的寬度設定問題。由於瀏覽器通常對不支援的css屬性採取忽略處理的態度,所以最好將display:inline-block行寫在後面,這樣在firefox裡面,如果到了未來的firefox 3,這一行就能起作用,**可以同時相容各種版本。

可用於產品庫選項的對齊排版。 eg: 

ul1007

ul1015

ul1032

ul1061

ul1185

ul2464

ul2468

設定span寬度的解決方案

在html中如何設定span的寬度?這看上去是個很簡單的問題,似乎用style中的width屬性就可以了。but 預設情況下span的寬度設定無效 在html中如何設定span的寬度?這看上去是個很簡單的問題,似乎用style中的width屬性就可以。例如,fixed width span 通過試驗...

php 無法上傳大檔案完美解決方案

php.ini無法上傳大檔案完美解決辦法 2 查詢post max size 表單提交最大數值,此項不是限制上傳單個檔案的大小,而是針對整個表單的提交資料進行限制的 預設為8m,設定為自己需要的值,此引數建議要設定比upload max filesize大一些 3 查詢file uploads 是否...

php無法上傳大檔案完美解決方案

php.ini無法上傳大檔案完美解決辦法 2 查詢post max size 表單提交最大數值,此項不是限制上傳單個檔案的大小,而是針對整個表單的提交資料進行限制的 預設為8m,設定為自己需要的值,此引數建議要設定比upload max filesize大一些 3 查詢file uploads 是否...