0

我基本上需要创建一个标题，它有一条垂直居中的水平线填充宽度（左右），但它也支持同一行上的多个文本元素，例如形成如下内容：

----- 阿尔法 - 贝塔 - 伽玛 -----

这是我到目前为止所拥有的：

JSfiddle

在这里，我的演示工作正常，但它需要背景才能工作，这不是一个好的解决方案，因为我网站上的背景不是静态的单色（它是固定的图片，滚动时不会移动）。

JSfiddle

所以我需要做的基本上是修复第一个版本，使其像第二个版本一样工作，但不使用背景。

我想过做类似的事情：

<div class="content">
  <div class="line"></div>
  <div class="line-text">Some</div>
  <div class="line-gap"></div>
  <div class="line-text">Text</div>
  <div class="line-gap"></div>
  <div class="line-text">In a Line</div>
  <div class="line"></div>
</div>

其中.line将是一个自动宽度（填充左侧和右侧），而.line-gap只是说 10px 以显示文本之间的线条。

编辑/更新

这是另一个演示，但我更喜欢更自动的东西，而不是尝试绝对设置位置，因为它适用于响应式流体设计......

JSfiddle

4

1 回答 1

0

如果您不想使用背景，可以使用:beforeand:after属性做一些小技巧。

这是示例jsFiddle，您可以将内容/属性更改为您喜欢的任何内容，它会按照您的要求进行操作。

下面的例子。

HTML：

<ul>
<li class="sub-menu-item" ><a href="#">Example</a></li>
<li class="sub-menu-item" ><a href="#">Example</a></li>
</ul>

CSS：

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014 \2014"
}

li { 
    display:inline-block;
}
于 2013-03-27T09:59:59.990 回答