这有点难以解释,如果有人知道更好的标题,请继续改变它。
我想在标题后面画一个黑盒子。 我在h-tag内部执行此操作。 它需要在左侧和右侧稍微填充一点。 我的布局是响应性的,因此标题可能会分为两行。
<div class="headline-black"> <h1 class="entry-title"> <span>Some very, very long headline, that is very, very long.</span> </h1> </div> h1 span { background: none repeat scroll 0 0 #000000; line-height:44px; padding:7px 25px 8px 25px; } .headline-black h1 { color: #FFFFFF; font-size: 22px; }问题:填充只影响跨度的结束和开始。 如果标题被打破,则字母触摸框的边框。
我希望这是可以理解的。 这是小提琴。 尽量让窗户小看,锄头表现得很好。
http://jsfiddle.net/832u8/2/编辑:我希望它的形状像文字一样。 正如你用毡尖标记它。 但每行都有填充。
That is a little bit hard to explain, if someone knows a better title for this, please go ahead and change it.
I want to draw a black box behind my headline. I'm doing this with a span inside the h-tag. It needs a little bit padding to the left and to the right. My layout is responsive, so it is likely that the heading breaks into two lines.
<div class="headline-black"> <h1 class="entry-title"> <span>Some very, very long headline, that is very, very long.</span> </h1> </div> h1 span { background: none repeat scroll 0 0 #000000; line-height:44px; padding:7px 25px 8px 25px; } .headline-black h1 { color: #FFFFFF; font-size: 22px; }The problem: The padding just affects the end and the beginning of the span. Where the heading is broken, the letter touch the border of the box.
I hope this is understandable. Here is the fiddle. Try to make the window small and watch, hoe it behaves.
http://jsfiddle.net/832u8/2/Edit: I want it to be shaped like the text. As you would mark it with a felt tip. But with padding for every line.
更多推荐
发布评论