2

現在、私は解決策を持っていますが、より良い解決策があることはほぼ確実です。基本的に、ブロック要素があり、ブロックの先頭と末尾にテキストの一部を揃えたいと考えています。

ここに小さなjsfiddleの例があります

私がやっていることは、float とさらに 2 つのブロック要素を使用して整列させることです。

<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's' で肥大化しています。これ以上軽量なソリューションはありませんか?

4

2 に答える 2

4

この質問への回答に基づいて、可能な回答をいじりました。

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

私が見る限り、すべてのブラウザで動作します...

于 2011-12-18T14:48:37.260 に答える
1

:after次のような CSSと: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以下では機能しません。

于 2011-12-18T14:53:09.623 に答える