1

这有点难以解释，如果有人知道更好的标题，请继续更改它。

我想在标题后面画一个黑框。我正在使用 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/

编辑：我希望它的形状像文本。就像你用毡尖做标记一样。但是每行都有填充。

4

5 回答 5

2

我假设您希望它以这种方式分成“两条黑线”？因为如果您只想要标题的黑色背景，并且保留填充，那么这个简化版本将起作用：

<h1 class="entry-title">Some very, very long headline, that is very, very long.</h1>

h1 {
  background: #000;
  line-height:33px;
  padding: 8px 25px;
  color: #fff
}

更新小提琴：http: //jsfiddle.net/kWgD2/

于 2013-06-28T14:29:13.817 回答
1

position:relative与左调整一起使用怎么样？如果您不手动进行调整，可能不是最好的方法，但至少它是一个纯 CSS 的解决方案？

示例-> http://jsfiddle.net/JnLje/358/

来自三十多点的更多信息->在每行文本的开头和结尾添加填充

于 2013-06-28T14:54:03.357 回答
1

这是我能得到的最接近的......真的很老套，我认为你自己需要一些 JS :(

这通过：

<h1 class="entry-title"><span id="Title"><span>Some very, very long headline, that is very, very long.</span></span></h1>


#Title {
 border-left: 20px solid #000;
 display:block;
 color: #fff;
}

#Title:after {
 content:'';
 display:inline-block;
 width: 20px;
 background: #000;
}

#Title span {
 background: #000;
 padding-right: 20px;
 direction: rtl;
}

http://jsfiddle.net/8EDPN/

于 2013-06-28T14:47:48.127 回答
0

您应该在 h1 上设置填充和/或将 span 设置为 inline-block http://jsfiddle.net/832u8/9/ ( span inline-block)

 h1 span {
        background: none repeat scroll 0 0 #000000;
        line-height:44px;
        padding:7px 25px 8px 25px;
        display:inline-block;
    }

http://jsfiddle.net/832u8/3/ （填充h1） 

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
padding:0 1em;
}
于 2013-06-28T14:26:13.200 回答
0

我最近发现了另一种解决方案。它适用于几乎所有浏览器（没有 IE8 及以下版本），易于调整，如下所示：

HTML

<h1>
    <span class="wrap">
        <span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span>
    </span>
</h1>

CSS

h1 {
    color:#fff;
}

.wrap {
    box-shadow: -10px 0 0 10px #000, 10px 0 0 10px #000;
}

.inner {
    background: #000;
    position:relative;
}
于 2014-03-26T12:41:24.770 回答