我想知道在 xhtml 1.0 strict 中有哪些选项可以像这样在文本的两侧创建一条线:
Section one ----------------------- Next section ----------------------- Section two
I've thought of doing some fancy things like this:
<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%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
除了对齐问题之外，这两个选项都让人感觉“笨拙”，如果您之前碰巧见过这个并且知道一个优雅的解决方案，我会非常感激。
最佳答案
怎么样:
<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
<span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
Section Title <!--Padding is optional-->
</span>
</div>看看这个JSFiddle .
您可以使用 vw 或 % 使其具有响应性。
https://stackoverflow.com/questions/2812770/