我想知道在xhtml 1.0中有哪些严格选项可以在像这样的文本两边都创建一行:
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%"> </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>
除了对齐问题之外,这两个选项都让人感到“前途未卜”,如果您碰巧曾经见过这一点并且知道一个优雅的解决方案,我将非常感激。
我不知道这是否已经解决,但是flexbox提供了一个解决方案:
<div class="separator">Next section</div> .separator { display: flex; align-items: center; text-align: center; } .separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid #000; } .separator::before { margin-right: .25em; } .separator::after { margin-left: .25em; }
如今,兼容性还不错(您可以添加所有旧的flexbox语法),并且可以正常降级。