Question

我正在尝试创建一个位于购物车图标顶部的徽章，其中包含购物车中的商品数量。

由于某种原因，徽章是椭圆形而不是圆形。我做错了什么？

const cartStyle = {
  width: "48px",
  height: "48px",
  verticalAlign: "middle",
  float: "right",
  marginBottom: "0",
  backgroundImage: `url(${ShoppingCart})`
};

const badgeStyle = {
   content: "0",
   background: "white",
   display: "inline",
   position: "relative",
   borderRadius: "50%",
   width: "36px",
   height: "36px",
   padding: "8px",
   left: "15px",
   border: "2px solid #666",
   color: "#666",
   textAlign: "center"
}

class Cart extends Component {
    render() {
        return(
            <div className="cart" style={cartStyle}>
                <div style={badgeStyle} > { this.props.cartProducts.length } </div>
            </div>
        );
    }
}

https://codepen.io/stoerebink/pen/QvjYpo

Answer 1

您需要使用内联块显示才能调整元素大小。并最终以行高为中心文本：

Viewcontroller A

Viewcontroller B

Answer 2

display: inline将元素呈现为内联，因此宽度取决于内容。如果要指定宽度，请更改为inline-block。

Answer 3

您的显示设置为内联，这意味着div不具备影响宽度和高度所需的属性。将显示设置为内联块，这将形成一个圆圈。如果要垂直居中文本，请将行高设置为与高度相同，因此在您的情况下，为36px。

Answer 4

这是因为它的内容。由于字体大小，徽章呈现为椭圆形。将font-size设置为0em，它将是一个很好的圆圈。

为什么我的徽章是椭圆形的

4 个答案: