8

我需要在标题文本的两侧创建一个等长线的标题，并在行和文本之间创建一个固定大小的填充。文本会有所不同，因此不得设置宽度。这些行应该占据标题容器中所有剩余的宽度。标题文字不能设置背景，因为它背后的背景会有所不同。像这样的东西：

-------------------------------------------------- -------- 一些文字 ----------------------------------------- ----------------

我使用表格解决了它：

<table width="100%">
  <td><hr /></td>
  <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
  <td><hr /></td>
</table>​

你可以在这里试试：http: //jsfiddle.net/md2dF/3/

从语义上讲，这是一个非常糟糕的解决方案，标题与表格数据无关。如果没有桌子，你会怎么做？

总结一下（因为建议的解决方案都忽略了一个或多个要求）：

  • 标题不能有固定宽度
  • 标题文字不得有背景
  • 标题文字不得有固定宽度
  • 文本两侧的线条必须占据所有剩余宽度
  • 行和文本之间的填充必须具有固定宽度
  • 如果有疑问，请查看http://jsfiddle.net/md2dF/3/
4

4 回答 4

22
于 2012-09-21T13:50:26.373 回答
6

在不知道宽度和背景颜色的情况下解决此问题的方法如下：

结构

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
}

.strike > span:after {
    left: 100%;
}

示例：http: //jsfiddle.net/z8Hnz/

于 2014-03-24T07:34:12.133 回答
6

编辑：

没有任何背景颜色或图像：

<div>
    <div><hr></div>
    <span>Some text</span>
    <div><hr></div>
</div>​

CSS：

div {
    width:300px;
    text-align:center;
    display:table;
}
div > div {
    display:table-cell;
    vertical-align:middle;
}
div > span {
    white-space:nowrap;
}​

适用于 IE8+

现场演示

原答案：

没有任何图像：

<div>
<span>Some text</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

​div {
    border-bottom:1px solid #000;
    line-height:16px;
    text-align:center;
}
span {
    background:#FFF;
    position:relative;
    bottom:-8px; /* half of line-height */
    padding:0 15px;
}

现场演示

你可以使用任何你想要的块h1元素 ( , h2, whatever) 而不是div.

于 2012-09-20T23:52:48.477 回答
0

您可以这样做（对于背景，您可以制作一个 1px 的颜色选择图像）：

<h1><span>Some Text</span></h1>

h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; }
h1 span { padding: 0 3px; background-color: #ffffff; }

编辑：没有背景颜色：

.hr { width: 100%; height: 40px; line-height: 40px; }
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; }
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; }
.hr .line.right { float: right;}

<div class="hr">
<div class="line left"></div>
<span>Some Text</span>
<div class="line right"></div>
</div>

您需要调整百分比等等，但它通常有效。

于 2012-09-20T23:50:13.640 回答