html - 将绝对定位元素宽度设置为它的内容(它只是一个文本)

Question

我要建这个

这是我的 HTML 代码

<div class="al-head-container">
    <div></div>
    <span>Center Websites</span>
</div>

这是CSS:

.al-head-container{
    margin: auto;
    width: 100%;
    padding:0 4%;
    position: relative;   
    box-sizing: border-box;
}

.al-head-container > span{
    font: 2.1em titr;
    color: #ae7f00;
    background-color: #FFFFFF;
    position: absolute;
    right: 0;
    left:0;

}
.al-head-container > div{
    width: 100%;
    height: 20px;
    background-image: url("../image/head-line.jpg");
    position: relative;
    top: 25px;
}

但这是代码的结果

问题是 span 宽度设置为 100% 并且它的宽度不适合它的内容。这是我从 Firebug 那里得到的

如您所见，文本覆盖了包含该行的 DIV。

我尝试为 span 设置 display:inline-block 但没有任何改变。如何使绝对定位跨度宽度适合内容？

Answer 1

为什么不纯粹在 CSS 中使用单个元素来完成此操作:

div {
    border-top:1px solid lightgrey;
    border-bottom:3px solid lightgrey;
    height:2px;
    position:relative;
    margin-top:15px;
}
div:after {
    content:attr(data-label);
    position:absolute;
    top:-10px;
    left:50%;
    padding:0 20px;
    display:inline-block;
    background:#fff;
    transform: translateX(-50%);
    text-align:center;
    color:#A37716;
    font-size:24px;
}

<div data-label="Center Websites"></div>