Question

我们有一个标题，左右两行。

左行必须填充标题左侧的剩余区域（减去一小部分），右行必须填充标题右侧的剩余区域。

请参阅下文，了解我的需求。

Answer 1

使用<HR>元素绘制线条并将DIV与文本放在上面，并为其提供与页面相同的背景颜色。

Answer 2

两个继承的元素怎么样，其中父元素的背景中有一行。子元素包含白色背景并且具有小填充。如果将子元素置于父元素中心，则应获得所需的效果。

例如，这应该有效：

<html>
    <head>
        <title></title>
        <style type="text/css">
            #header {
                width: 100%;
                padding: 0;
                background: url(img/line.png) repeat-x;
            }

            #headertext{
                text-align: center;
            }

            #headertext h1 {
                display: inline;
                background-color: white;
                font-size: 150%;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <div id="headertext">
                <h1>Heading</h1>
            </div>
        </div>
    </body>
</html>

实现这种结构的最佳方法是什么？

2 个答案: