在div的结尾和开头对齐文本

Question

目前我有一个解决方案，但我几乎可以肯定那里有更好的解决方案。基本上我有一个块元素，想要在块的开头对齐一些文本，在末尾对齐一些文本。

这是一个小jsfiddle示例

我正在做的是使用float和另外两个块元素来对齐它：

<div id="block">
    <div id="start">1</div>
    -
    <div id="end">12</div>
</div>

#block {
    text-align:center;
    background: #000;
    color: white;
    width:150px;
}
#start {
    float:left;
}
#end {
    float:right;
}

我有很多这样的小对象，所以我的代码用div来膨胀。那里没有更轻量级的解决方案吗？

Answer 1

我根据this question的答案摆弄了一个可能的答案。

http://jsfiddle.net/ScHdJ/2/

据我所知，适用于所有浏览器......

Answer 2

可能你可以使用CSS :after＆amp;这样的:before伪类：

<强> HTML：

<div id="block">
    hello
**</div>

CSS：**

#block {
    text-align:center;
    background: #000;
    color: white;
    width:150px;
    overflow:hidden;
}
#block:before{
    content:"1";
    float:left;
}
#block:after{
    content:"12";
    float:right;
}

http://jsfiddle.net/ScHdJ/3/

但是在IE7＆amp;下方。