你将如何为此设计HTML标记 [英] How would you design the HTML markup for this

问题描述

我想制作一个水平线，中间有文字。它应该看起来像这样（文本图像如下）：

I want to make something like a horizontal line with a text in the middle of it. It should look like this (text image follows):

----------------- ------------------------- TEXT ------------------------ --------------------

------------------------------------------ TEXT --------------------------------------------

该行应加点并且中间的文本应该将行分成两半。

the line should be dotted and the text in the middle should separate the line in half.

我想出了一个使用带有3个元素的表格的方法，这个元素的宽度属性包含百分比值，但也许有一个更好的解决方案。

I came up with the idea of using a table with 3 elements with percentage values in width attribute but maybe there is a better solution.

我希望这很清楚。感谢您的建议

I hope it's clear. Thanks for ideas

推荐答案

<div id="line"><span>TEXT</span></div>

和CSS：

And CSS:

#line{
    border-bottom: 1px black dotted;
    overflow:visible;
    height:9px;
    text-align:center;
    margin: 5px 0 10px 0;
}
#line span{
    background-color: white;
    text-align:center;
    padding: 0 5px;
}

请参阅JSFiddle上的示例

这篇关于你将如何为此设计HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！