带有数字的CSS圆。显示为椭圆形而不是圆形

Question

我希望有人能帮助我理解为什么我的页面链接类无法产生适当的圆圈？

请在此处查看小提琴：https://jsfiddle.net/ts59108v/

我希望下面的css类产生一个圆形，而不是一个椭圆形：

.page-link {
    font-style: normal;
    width: 50px;
    min-width: 50px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    height: 50px;
    vertical-align: middle;
    line-height: 50px;
    border: 2px solid #bdbdbd;
    margin-right: 8px;
    font-weight: 400;
}

谢谢！

Answer 1

您忘记将inline-block添加到.page-link。

jsFiddle

Answer 2

您需要将display: inline-block添加到.page-link类中。 <i>元素是一个内联元素，因此如果不添加display: inline-block，就无法更改其大小：

.page-visited {
  border: 2px solid #000 !important;
  color: #000 !important;
}
.page-link {
  font-style: normal;
  width: 50px;
  min-width: 50px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  height: 50px;
  vertical-align: middle;
  line-height: 50px;
  border: 2px solid #bdbdbd;
  margin-right: 8px;
  font-weight: 400;
  display:inline-block;
}
.page-link:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 25px;
  border-left: 1px solid #bdbdbd;
  transform: translate(-50%);
}

<div class="page-link-container">
  <i class="page-link page-visited">1</i>
  <span>Page 1</span>
</div>
<div class="page-link-container">
  <span class="page-link">2</span>
  <span>Page 2</span>
</div>
<div class="page-link-container">
  <i class="page-link">3</i>
  <span>Page 3</span>
</div>

---

如果圆形应该在垂直线之前可见（并且当前的圆形较大），则可以使用以下命令：

html, body {
  margin:0;
  padding:0;
}
.page-visited {
  border: 2px solid #000 !important;
  color: #000 !important;
}
.page-link {
  font-style: normal;
  width: 20px;
  min-width: 20px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  height: 20px;
  vertical-align: middle;
  line-height: 20px;
  border: 2px solid #bdbdbd;
  margin-right: 8px;
  font-weight: 400;
  display:inline-block;
}
.page-link:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 25px;
  border-left: 1px solid #bdbdbd;
  transform: translate(-50%);
}

<div class="page-link-container">
  <i class="page-link page-visited">1</i>
  <span>Page 1</span>
</div>
<div class="page-link-container">
  <span class="page-link">2</span>
  <span>Page 2</span>
</div>
<div class="page-link-container">
  <i class="page-link">3</i>
  <span>Page 3</span>
</div>

---

  

宽度/最小宽度：此属性不适用于非替换的嵌入式元素。未替换的嵌入式元素的框的内容宽度是其内已呈现内容的宽度（在子级的任何相对偏移之前）。回想一下，内联框会流入线框。线框的宽度由其包含的块指定，但可能会因浮点数而缩短。
  来源： https://www.w3.org/TR/CSS2/visudet.html#propdef-width

line-height影响行内元素的高度，而width或min-width则不受影响。

Answer 3

检查一下：http://jsfiddle.net/thirtydot/dQR9T/2637/

.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;}`