css - css垂直テキスト：フォントサイズの継承と境界線の半径

Question

私は次のhtmlを持っています：

<div class="horizontal">
    <div class="biggest">t e s t <div class="circle">1</div></div>
    <div>t e s t <div class="circle">2</div></div>
    <div>t e s t <div class="circle">3</div></div>
</div>

次のCSSを使用します。

.horizontal div {
    float: left;
    width: 1em;
    letter-spacing: 1em;
    word-wrap: break-word;
    font-size: 100%;
}
.biggest {
    font-size: 150%;
}
.circle {
    border-radius: 50%;
    background-color: red;
}

私の出力： http： //jsfiddle.net/ZaffJ/3/

以下は、私が得ているものについて私が理解していないことです：

1. クラスにカプセル化された最初の列biggestのフォントサイズが残りの列よりも大きいと予想していましたが、3列すべてでフォントサイズが均一になっています。
2. circle設定したクラスの各数字の周りに素敵な円を期待していましたborder-radius: 50%。私が実際に得ているのは、いくつかの奇妙な楕円形です。
3. （更新）クラスの番号をcircle中央に表示する。

誰かが私に何が起こっているのか、そして私が望む出力をどのように達成できるのかを説明できますか？

Answer 1

1. セレクター.horizontal divは より具体的.biggestです。セレクターを に変更してこれを修正してください.horizontal .biggest
2. height: 1em幅 (1em) を定義したが高さを定義していないため、テキストは正方形ではありません.circle。.horizontal div

固定デモ

Answer 2

を 100% にline-height設定します。.circlecss は.horizontal .biggest { }だけでなく、 である必要があり.biggest { }ます。次のように設定することもできます。

.biggest {
    font-size: 150% !important;
}

  フルCSS

.horizontal div {
    float: left;
    width: 1em;
    letter-spacing: 1em;
    word-wrap: break-word;
    font-size: 100%;
}
.horizontal .biggest {
    font-size: 150% ;
}
.circle {
    border-radius: 50%;
    line-height: 100%;
    background-color: red;
}
.circle span {
    text-align: center;
    width: 2em;
    display: block;
}

次のように数値をスパン内にラップします。

<div>t e s t <div class="circle"><span>2</span></div></div>

Jsbin: http://jsbin.com/uwuquh/1/edit

Answer 3

CSS を次のように変更します。

.horizontal .biggest {
}

それ以外の

.biggest {
}