CSS垂直文本：字体大小继承和边界半径

我有以下的html：CSS垂直文本：字体大小继承和边界半径

<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的设定的每个数字周围有一个很好的圆圈。我实际得到的是一些奇怪的椭圆。
（更新）让circle中的数字显示在它的中心。

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

来源

2013-02-14 dk123

设置.circle至100 line-height的％。 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; 
}

内跨度的这样总结你的号码：

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

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

来源

2013-02-14 11:13:05 estrar

谢谢为答复。我从输出中看到数字不在圆内居中;还有解决方案吗？ – dk123 2013-02-14 11:29:32

是的，你可以用span来包装数字。看到我更新的答案和小提琴：http://jsbin.com/uwuquh/1/edit – estrar 2013-02-14 11:53:05

谢谢，这是令人印象深刻的！你能否快速回顾一下圈子中居中的文字是如何工作的？我注意到，如果我将'.circle span'中的css复制到'.circle'并移除'.circle span'，则文本不再居中。 – dk123 2013-02-15 02:46:42

你的CSS更改为：

.horizontal .biggest { 
}

，而不是

.biggest { 
}

来源

2013-02-14 11:06:25 KBN

的选择.horizontal div比.biggest更specific，通过选择更改为.horizontal .biggest
文本ISN解决这个问题” t平方，因为你已经定义了宽度（1em）而不是高度，请添加height: 1em至.circle或.horizontal div

Fixed demo

来源

2013-02-14 11:07:20 Andy

+ 1为特定的链接。虽然有什么解决方案将文本居中在圆中？我看到它们稍微向左侧放置。 – dk123 2013-02-14 11:30:15

@ dk123我会玩，但我不这么认为，如果你删除边框半径，你会看到数字不在'.circle'元素的中间。文本对齐：中心不解决这个问题，所以我不知道该怎么办 – Andy 2013-02-14 11:36:50

@ dk123我不能得到它的工作，恐怕我能建议的是很多绝对定位和东西：/ – Andy 2013-02-14 11:44:58

CSS垂直文本：字体大小继承和边界半径

回答

相关问题