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. 我期待在课堂上的每个数字周围都有一个漂亮的圆圈circleset border-radius: 50%。我实际上得到的是一些奇怪的椭圆形。
3. （更新）让课堂上的号码circle显示在它的中心。

谁能向我解释发生了什么以及如何实现我想要的输出？

Answer 1

1. 选择器比.horizontal div更具体.biggest，通过将选择器更改为来解决此问题.horizontal .biggest
2. 文本不是方形的，因为您定义了宽度（1em）但没有定义高度，添加height: 1em到.circle或.horizontal div

固定演示

Answer 2

将 的 设置line-height为.circle100%。css 应该是.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;
}

将您的数字包装在 span 中，如下所示：

<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 {
}