相关疑难解决方法(0)

我想知道在xhtml 1.0 strict中有什么选项可以在文本的两边创建一条线 - 所以:

Section one
----------------------- Next section -----------------------
Section two

我想过做一些像这样的奇特事情:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

或者,因为上面的对齐问题(垂直和水平):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

这也有对齐问题,我解决这个问题:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

除了对齐问题之外,这两个选项都感觉"有点",如果你以前碰巧看过这个问题并且知道一个优雅的解决方案,我会非常感激.

我想在居中的标题之前和之后创建一条线.线条和文本必须具有透明背景才能将它们放置在不平坦的背景上.该行不得为100%宽度,如下所示:

标题的文字可以改变:

• 标题的宽度未知
• 标题可以跨越几行

h1 {
  text-align: center;
  border-bottom: 1px solid #000;
}

<h1>Today</h1>

我使用伪元素:before和:after前一个标题后画一条线.它正在使用图像:

.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}

结果如下:

但是,我希望该行扩展并在标题之前和之后填写整个div,如下所示:

有没有办法为图像指定一个百分比来拉伸？我试试这个,但它不起作用:

.mydiv img {
  width: 100%;
  height: auto;
}