Question

我有这个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。现在，当数字改变时，边界会扩大。

这是我的意思documentation。

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

Answer 1

试试这个。添加display:inline-block然后line-height以垂直对齐数字。通过设置此框，框将展开。调整height＆amp;根据您的需要width。如果是这样，请不要忘记相对于框的高度调整line-height。

＆＃13;

.numberCircle {
    border-radius: 30%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    line-height:36px; /*vertcally center the numbers*/
    width: 36px;
    height: 36px;
    padding: 0px 5px 0px 5px;
    display:inline-block; /* Added */
    background: #fff;
    border: 2px solid #333;
    color: #333;
    text-align: center;
    font-size: large;
    font-weight:bold;
}

＆＃13;

<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>

＆＃13;

Answer 2

您可以只显式设置宽度。我建议一个相对于字体大小的mesure单位（即em s）

编辑：您似乎缺少的是display:inline-block。您无法设置内联元素的宽度。添加它可能会让你大部分时间都在那里。

＆＃13;

.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;
  
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;

}

＆＃13;

<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>

＆＃13;

Answer 3

查看以下属性：

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;

线高，宽度和高度将塑造您的盒子。虽然新的显示属性将有助于将元素一个接一个地对齐＆＃34;时尚。：）

保持边框大小

3 个答案: