html - css：将文本包装到 div 中，以便 div 获取文本的长度

Question

这是一个代码：

小提琴

<div id="main" style="border:1px solid red;">
<div id="child" style="background-color:#68c5e7; width:170px; margin:0 auto; font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); background-repeat   : no-repeat;">
<span style="padding-left:116px;">9:58</span>
</div>
</div>

使用javascript计算时间，因此可以在页面加载后更改字符串的长度。如何固定背景的长度 #68c5e7 使其具有适当的长度（对应于img+text的长度）。

同样，您将 9:58 更改为 10:03，但背景颜色的长度没有更改，它不适合。还有一个要求：图片+文本（文本不能太长，总是不超过主div的长度）应该正好在主div的中间。

Answer 1

只需将所有样式添加到<span>标签并将分配的值删除到width：

HTML标记：

<div id="main">
    <div id="child">
        <span> 123456</span>
    </div>
</div>​

CSS标记：

#main{
    border:1px solid red;
}

#child {
    text-align: center;
}

span{
    /*width:190px; */
    padding-left:114px;
    background-color:#24a5a5;
    margin:0 auto; 
    font-size:30px; 
    background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); 
    background-repeat: no-repeat;
    white-space:nowrap;
    position: relative;
}

检查此演示

Answer 2

做一些改变：

1. 从容器 div 中删除宽度
2. 将 text-align:center 添加到父 div
3. 使容器 div 显示 inline-block

jsFiddle 示例

HTML

<div id="main" style="border:1px solid red;text-align:center">
<div id="child" style="background-color:#24a5a5;  font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); background-repeat   : no-repeat;display:inline-block;">
    <span style="padding-left:114px;"> 12345678</span>
</div>
</div>​