html 設定span的長度

2021-06-06 05:17:06 字數 1495 閱讀 1939

先執行下程式看下:

123輸出:123

可以看到 span會自動根據包含的內容來變化寬度

這是因為:對於內聯元素(可以是預設即為內聯的比如 span 元素,也可以是 display: inline 的元素)

width 和 height 只在 ie5.x 下和 ie6 或更新版本的 quirks 模式下觸發 haslayout 。而對於 ie6,如果瀏覽器執行於標準相容模式下,內聯元素會忽略 width 或 height 屬性,所以設定 width 或 height 不能在此種情況下令該元素具有 layout。

zoom 總是可以觸發 haslayout,但是在 ie5.0 中不支援。

具有「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跟div一樣了。

如果設定display:inline-block,則span並列在同行,而且width屬性生效。

元素display屬性的常見值說明:

block:塊物件的預設值。將物件強制作為塊物件呈遞,為物件之後新增新行。

inline:內聯物件的預設值。將物件強制作為內聯物件呈遞,從物件中刪除行。(內聯)

《css權威指南》中文字顯示:任何不是塊級元素的可見元素都是內聯元素。其表現的特性是「行布局」形式,

這裡的「行布局」的意思就是說其表現形式始終以行進行顯示。

比如,我們設定乙個內聯元素border-bottom:1px solid #000;時其表現是以每行進行重複,每一行下方都會有一條黑色的細線。

假如是塊級元素那麼所顯示的的黑線只會在塊的下方出現。

inline-block:將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內。

non:隱藏物件。與 visibility 屬性的hidden值不同,其不為被隱藏的物件保留其物理空間。

內聯(display:inline;)元素不能設定寬高,因為內聯屬於行布局,其特性是在一行裡進行布局,所以不能被設定寬高。

123輸出:123

<3>如果設定float:left | right,width屬性生效.

(浮動)他使得指定元素脫離普通的文件流而產生的非凡的布局特性。並且float必需應用在塊級元素之上,也就是說浮動並不應用於內聯標籤。或者換句話來說當應用了float那麼這個元素將被指定為塊級元素。

123輸出:123

詳細出處參考:

設定span的寬度

引自 在預設的情況下,利用css樣式對span進行寬度設定是無效,但有時為了某種排版的要求,需要對span進行寬度設定,那麼如何在html中利用css樣式設定span的寬度?思路 這看上去是個很簡單的問題,似乎用style中的width屬性就可以。然而通過試驗以後發現,無論是在firefox還是ie...

設定span的寬度

在預設的情況下,利用css樣式對span進行寬度設定是無效,但有時為了某種排版的要求,需要對span進行寬度設定,那麼如何在html中利用css樣式設定span的寬度?思路 這看上去是個很簡單的問題,似乎用style中的width屬性就可以。然而通過試驗以後發現,無論是在firefox還是ie中都無...

設定span的寬度

引自 html 在預設的情況下,利用css樣式對span進行寬度設定是無效,但有時為了某種排版的要求,需要對span進行寬度設定,那麼如何在html中利用css樣式設定span的寬度?思路 這看上去是個很簡單的問題,似乎用style中的width屬性就可以。然而通過試驗以後發現,無論是在firefo...