高度和寬度是否不適用於跨度？

157

CSS

.product__specfield_8_arrow { 

    /*background-image:url(../../upload/orng_bg_arrow.png); 
    background-repeat:no-repeat;*/ 
    background-color:#fc0; 
    width:50px !important; 
    height:33px !important; 
    border: 1px solid #dddddd; 
    border-left:none; 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-bottom-left-radius:0px; 
    border-top-left-radius:0px; 
    -moz-border-radius-bottomleft:0px; 
    -moz-border-radius-topleft:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -webkit-border-top-left-radius:0px; 
    margin:0; 
    padding:2px; 
    cursor:pointer; 
}

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>

Fiddle

基本上我試圖效仿的按鈕，使跨度（或東西）看起來像一個按鈕旁邊的輸入因爲自動填充生成器在onEnter上生成錯誤，所以實際上不需要這個字段。以爲這是現在的一個快速修復，但顯然不是。

謝謝。

來源

2010-03-22 Kyle

你可能也想看看http://stackoverflow.com/questions/2343989/how-to-set-height-property-for-span – 2010-03-22 09:36:13

也檢查標準，特別是ht tp：//www.w3.org/TR/CSS2/visudet.html#the-width-property和http://www.w3.org/TR/CSS2/visudet.html#the-height-property，其狀態屬性「適用於：所有元素但未被替換的行內元素，錶行和行組」 – outis 2010-03-22 09:56:16

287

跨度是一個內聯元素。它沒有寬度或高度。

您可以將它變成塊級元素，然後它會接受您的維度指令。

span.product__specfield_8_arrow 
{ 
    display: block; /* or inline-block */ 
}

來源

2010-03-22 09:33:41

謝謝，修復它。我試過顯示：塊之前，但內聯塊修復它。 – Kyle 2010-03-22 09:38:22

+13

這就是問題所在。如果指定了'display：block'，跨度將停止爲一個內聯元素，並且一個元素出現在下一行之後。我需要一個內聯的元素，但可以是所需的寬度。 – Paul 2013-03-21 17:52:37

span s默認顯示爲內聯，這意味着它們沒有高度和寬度。

嘗試添加一個display: block到您的範圍。

來源

2010-03-22 09:34:52

跨度作爲內聯元素開始。例如，您可以將其顯示屬性更改爲阻止，並且其高度/寬度屬性將開始生效。

來源

2010-03-22 09:35:14

嘗試使用div代替span或使用CSS display: block;或display: inline-block; — span是默認不能採取width和height性質的內嵌元素。

來源

2010-03-22 09:36:34 Isaac

div不是跨度的語義替換。 span是一個文本容器，而div是一個佈局容器。應用像開發者藝術這樣的內聯塊風格已經提出是正確的答案。 – 2010-03-22 09:43:36

該問題沒有提供任何上下文來表明div在語義上本質上不合適。 – Isaac 2010-03-22 09:45:16

實際上，閱讀op的標記，它實際上看起來像所討論的元素，被用來簡單地顯示背景圖像。在這種情況下，div實際上會更合適。 -1從艾薩克的原始評論中刪除。 – 2010-03-22 15:15:05

只有當我們使其阻擋元素時，跨度纔會佔用寬度和高度。

span {display:block;}

來源

2013-05-20 19:43:41

+12

我認爲'display：inline-block;'更好 – 151291 2015-08-11 13:26:10

由於每從@保羅評論，如果顯示：指定塊，跨度停止它出現在下一行之後是一個內聯元件和元件。

我來這裏是爲了找到解決我的跨度高度的問題，我的解決方案我自己

添加overflow:hidden;和keeing它內聯將解決只是在IE8怪癖模式測試的問題，從@啓發

來源

2014-03-27 13:08:07

我總是看到'overflow：hidden ;'在這方面。「內容被剪裁，沒有滾動條」[MDN說]（https://developer.mozilla.org/en-US/docs/Web/CSS/overflow）。似乎違反直覺。它在這裏做什麼？ – 2017-02-08 17:10:34

哈米德，我增加了以下和它的工作對我來說：

display: inline-block; overflow: hidden;

來源

2016-06-17 08:05:15 olleh

高度和寬度是否不適用於跨度？

回答

相關問題