跨度背景色和填充问题

我有一个设计，我想实现涉及其自身的背景颜色，由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

跨度背景色和填充问题

回答

相关问题