跨度背景色和填充問題

我有一個設計，我想實現涉及其自身的背景顏色，由10px的填充，在圖像上出現的標題文字，面值例如：跨度背景色和填充問題

http://i.stack.imgur.com/E7EpS.png

的在這張照片第一實例的效果很好，並且是簡單的：當文本溢出到另一條線路，則跨度元件填充不影響對換行文本

.greenbox {width:520px; height:261px; position:relative;} 
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }

故障出現時，它呈現像這樣：

http://i.stack.imgur.com/pY18f.png

任何人都知道一個替代的，否則他們將如何設置此設計出來，使背景色填充&是一致的？

在此先感謝

編輯：我已經簡化了代碼，使之簡潔，但已經錯過了一個重要組成部分。其實是這樣的：

.greenbox {width:520px; height:261px; position:relative;} 
.greenbox a {position:absolute; left:0; bottom:40px; } 
.greenbox span { padding:0 10px; background:#000; }

與HTML爲：

<div class="greenbox"> 

    <a href="link"><span>The Title Goes Here</span></a> 

</div>

因此跨度仍然在線，包裹在一個絕對位置錨。

來源

2011-08-18 Michael Watson

請提供您的標記代碼示例。 JsFiddle是做這件事的好方法 – Curt

在你的問題中發佈標記實際上是首選方法，[jsfiddle]（http://jsfiddle.net/）是次要的。如果我正確地理解了這一點，我認爲這是一個「錯誤」，這裏有一個關於它的問題，許多失敗的嘗試作爲解決方案，我會嘗試找到它。 –

發現它：[CSS創建換行前填充]（http://stackoverflow.com/q/6099857） –

我已經解決了類似的事情之前：Add padding at the beginning and end of each line of text

我搶了自己從該解決方案，它適合你的情況。

請注意，line-height和padding調整可以是非常棘手的得到正確的。

參見：http://jsbin.com/ahoyug

HTML：

<div class="greenbox"> 
    <a href="#"><span><span> 
     The Title Goes Here, with overflow 
    </span></span></a> 
</div>

CSS：

.greenbox {width:500px; height:200px; position:relative; background:green} 

.greenbox > a { 
    font: 50px sans-serif; 
    line-height: 1.14; 
    padding: 0; 
    border-left: 20px solid #000; 
    position: absolute; 
    left: 0; 
    bottom: 60px; 
    text-decoration: none; 
    color: #fff 
} 
.greenbox > a > span { 
    background: #000 
} 
.greenbox > a > span > span { 
    position: relative; 
    left: -10px 
}

來源

2011-08-18 10:43:39 thirtydot

太棒了！嗯，它感覺很糟糕，雙倍跨越，但它是一種享受。邊框左 - >偉大的橫向思維:) –

是的，我同意。我希望能夠更優雅地做到這一點。 – thirtydot

更新後的jsbin用box-shadow做它，如果我可以說本質上是單行修補，那麼優雅。 – lintuxvi

的有些簡單的方法是添加border的鏈接左側和然後添加兩個wr然後將位置先放在左邊，然後再放回右邊，所以它會像這樣：http://jsfiddle.net/kizu/fNGgN/4/

來源

2011-08-18 10:52:07 kizu

我完全可以做同樣的事情！ :) – thirtydot

哈哈，是的，的確如此！我使用額外的包裝器修改了我的版本，因爲它可以獨立於邊界：http://jsfiddle.net/kizu/fNGgN/5/ :) – kizu

完美的解決方案。 – bottleboot

跨度背景色和填充問題

回答

相關問題