Html 保持边界大小

我有一个CSS类：

.numberCircle {
    border-radius: 30%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */

    width: 36px;
    height: 36px;
    padding: 0px 5px 0px 5px;
    background: #fff;
    border: 2px solid #333;
    color: #333;
    text-align: center;
    font-size: large;
    font-weight:bold;
}

即使数字从10变为9，我也希望保持相同的边框宽度。 现在，当数字改变时，边界会扩大

这是我的意思的一个例子

---

我已经尝试更改padding属性，但无法使其正常工作。

试试这个。添加

display:inline block

，然后添加

line height

以垂直对齐数字。通过设置此选项，框将展开。根据需要调整

高度

和

宽度

。如果是这样，请不要忘记相对于方框高度调整

行高度


.numberrcle{
边界半径：30%；
行为：url（PIE.htc）；/*如果不关心IE8，请删除*/
线高：36px；/*垂直居中数字*/
宽度：36px；
高度：36px；
填充：0px 5px 0px 5px；
显示：内联块；/*已添加*/
背景：#fff；
边框：2倍实心#333；
颜色：#333；
文本对齐：居中；
字体大小：大号；
字体大小：粗体；
}
10
9试试这个。添加
display:inline block
，然后添加
line height
以垂直对齐数字。通过设置此选项，框将展开。根据需要调整
高度
和
宽度
。如果是这样，请不要忘记相对于方框高度调整
行高度


.numberrcle{
边界半径：30%；
行为：url（PIE.htc）；/*如果不关心IE8，请删除*/
线高：36px；/*垂直居中数字*/
宽度：36px；
高度：36px；
填充：0px 5px 0px 5px；
显示：内联块；/*已添加*/
背景：#fff；
边框：2倍实心#333；
颜色：#333；
文本对齐：居中；
字体大小：大号；
字体大小：粗体；
}
10
9
您可以明确设置宽度。我建议使用与字体大小相关的度量单位（即
em
s）

编辑：似乎您所缺少的只是
display:inline block
。不能设置内联元素的宽度。添加它可能会让你在大部分的道路上


.numberrcle{
边界半径：30%；
行为：url（PIE.htc）；/*如果不关心IE8，请删除*/
/*宽度：36px；
高度：36px*/
填充：0px 5px 0px 5px；
背景：#fff；
边框：2倍实心#333；
颜色：#333；
文本对齐：居中；
字体大小：大号；
字体大小：粗体；
显示：内联块；
宽度：1.5em；
高度：1.5em；
线高：1.5em；
}
10
9
您可以明确设置宽度。我建议使用与字体大小相关的度量单位（即
em
s）

编辑：似乎您所缺少的只是
display:inline block
。不能设置内联元素的宽度。添加它可能会让你在大部分的道路上


.numberrcle{
边界半径：30%；
行为：url（PIE.htc）；/*如果不关心IE8，请删除*/
/*宽度：36px；
高度：36px*/
填充：0px 5px 0px 5px；
背景：#fff；
边框：2倍实心#333；
颜色：#333；
文本对齐：居中；
字体大小：大号；
字体大小：粗体；
显示：内联块；
宽度：1.5em；
高度：1.5em；
线高：1.5em；
}
10
9
查看以下属性：

line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;

线条高度、宽度和高度将塑造你的盒子。而新的显示属性将有助于以“一个接一个”的方式对齐元素：
 查看以下属性：

line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;

线条高度、宽度和高度将塑造你的盒子。而新的显示属性将有助于以“一个接一个”的方式对齐元素：
 不清楚你的意思。在两种情况下，边框大小均为2px。你什么意思？对不起，我想我指的是宽度。我希望每个数字都有相同的“方框”，即使它是两位数而不是一位数。我不清楚你的意思。在两种情况下，边框大小均为2px。你什么意思？对不起，我想我指的是宽度。我希望每个数字都有相同的“方框”，即使它有两位数而不是一位数。