設置span的寬度

時間 2020-01-27

標籤設置 span 寬度简体版

原文原文鏈接

　　在默認的狀況下，利用 css 樣式對 span 進行寬度設定是無效，但有時爲了某種排版的要求，須要對 span 進行寬度設定，那麼如何在 html 中利用 css 樣式設定 span 的寬度？css

　　思路：這看上去是個很簡單的問題，彷佛用 style 中的 width 屬性就能夠。html

　　然而經過試驗之後發現，不管是在 Firefox 仍是 IE 中都無效。瀏覽器

　　在 CSS2 的標準中，查閱關於 width 的定義，咱們能夠發現，原來 css 中的 width 屬性並不老是有效的：若是對象是 inline 對象，width 屬性就會被忽略，Firefox 和 IE 都遵循了這個標準。ide

　　一、初步解決 span 寬度方案：修改 span 爲 block 類型。測試

　　在 span 的 css 中增長 display 屬性，將 span 設置爲 block 類型。網站

span { 
    background-color: #fc0; 
    display: block; 
    width: 150px; 
}

　　這樣寬度就能夠實現了，不過這樣作也把先後文字隔在不一樣行裏面：這樣其實至關於把 span 徹底變成了 div。spa

　　二、進一步解決 span 寬度方案設計

　　而後咱們再增長一個 css 屬性 float，這樣的確在某種條件下能解決問題。xml

span {
    background-color: #fc0;
    display: block;
    float: left;
    width: 150px;
}

　　然而若是 span 前面沒有文字，那這樣作的確是可行的；可是若是有字，先後文字就會連在一塊兒，而 span 跑到了第二行。htm

　　其實，在 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 之後都沒問題。

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

　　下面代碼的 css 定義完美解決了 span 的寬度設置問題。因爲瀏覽器一般對不支持的 css 屬性採起忽略處理的態度，因此最好將 display:inline-block 行寫在後面，這樣在 Firefox 裏面，若是到了將來的Firefox 3，這一行就能起做用，代碼能夠同時兼容各類版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Test Span</title>
        <style type="text/css">
            span {
                background-color: #fc0;
                display: -moz-inline-box;
                display: inline-block;
                width: 150px; 
            }
        </style>
    </head>

    <body>
        HCONLY視覺網站設計<span>width</span>營銷策劃
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。