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/

以下是我不了解的内容：

我希望类biggest中封装的第一列的字体大小比其他列的字体大，但我为所有3列都获得了统一的字体大小。
我期待在circle课程中设置border-radius: 50%的每个号码周围都有一个很好的圈子。我实际得到的是一些奇怪的椭圆形。
（更新）让班级circle中的号码显示在其中心。

任何人都可以向我解释发生了什么以及如何实现我想要的输出吗？

Answer 1

选择器.horizontal div比.biggest更specific，通过将选择器更改为.horizontal .biggest
文字不是正方形，因为您已定义宽度（1em）而非高度，将height: 1em添加到.circle或.horizontal div

Fixed demo

Answer 2

将line-height的{{1}}设置为100％。 css应为.circle，而不仅仅是.horizontal .biggest { }。您也可以这样设置：

.biggest { }

完整CSS

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

将你的号码包裹在这样的范围内：

.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;
}

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

Answer 3

将您的CSS更改为：

.horizontal .biggest {
}

而不是

.biggest {
}

css垂直文本：font-size继承和border-radius

3 个答案: