0

我已经改编了一个侧面带有线条的标题示例（在这里找到，更具体地说：在这里）。它工作得很好，但我无法做的是在文本的任一侧应用一些填充，并让侧面的线条伸展以拥抱容器的任一侧。有谁知道这是怎么做到的吗？

到目前为止，我有以下 HTML：

<h2 class="section-heading">Example</h2>

和 CSS：

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading:before,
.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat center / 90% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

（我已经把它放在jsfiddle上，最好我想在没有任何额外元素的情况下这样做）

4

5 回答 5

1

好的，我可以在没有任何额外内容的情况下完成此操作，<span>或者<div>通过拆分伪元素并分别左右对齐它们的背景。然后我可以像这样通过背景的宽度设置填充（示例两边都有 5% 的填充）：

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading:before {
  background: linear-gradient(to bottom, black, black) no-repeat left center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat right center / 95% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

演示在这里，谢谢大家的帮助！

于 2013-10-01T10:32:51.567 回答
0

您可能必须有一个内部包装器来处理填充，如下所示：

HTML：

<h2 class="section-heading"><div class="section-heading-padding">Example</div></h2>

CSS：

.section-heading {
  display: table;
  white-space: nowrap;
}

.section-heading-padding {
  padding: 0 200px;
}

.section-heading:before,
.section-heading:after {
  background: linear-gradient(to bottom, black, black) no-repeat center / 100% 1px;
  content: "";
  display: table-cell;
  width: 50%;
}

我想不是很理想。希望有人可以为您提供更好的解决方案。

JSFiddle在这里。

编辑：我已经更新了这个让线条拥抱两侧。

线条没有紧贴两侧的原因是它们的宽度设置为90%。我认为这是因为它在文本周围添加了填充；然而，不想要的副作用是它还在外边缘周围添加了填充。将它们设置为100%宽度，然后让内部填充处理文本周围的填充似乎会产生您想要的结果。

于 2013-10-01T10:24:23.457 回答
0

这是我的解决方案，<span></span>在您的 h2 元素中添加，然后添加填充/边距h2 span {}

http://jsfiddle.net/dASCv/7/

于 2013-10-01T10:24:59.100 回答
0

喜欢这个演示吗？

然后只需添加border-spacing到您的section-heading

于 2013-10-01T10:26:55.303 回答
0

添加位置：相对；顶部：0.6em；到你的 CSS 伪类。

于 2013-10-01T10:29:54.953 回答