html - 为什么我没有在元素周围得到一个完美的圆圈

Question

我正在尝试在 <p-calendar> 中添加一些样式primeng 6.1.1 的标签.我想要悬停在月份元素上的蓝色圆圈。我期待着:

但相反，我得到了这个:

为什么它是椭圆形而不是完美的圆形。我正在使用 border-radius: 50% !important .这是我的datepicker.scss

.ui-monthpicker-month {
    border-radius: 50% !important;
    text-decoration: none;
    margin-top: 10px;
    color: #73767b;
    font-family: 'Muli', sans-serif;
    padding: 0px 20px 0 20px;
}

.ui-monthpicker-month:hover {
    background-color: #1474A4;
    color: white;
}

请指正。

Answer 1

那是因为元素不是方形的。使用 chrome 调试器检查宽度和高度是多少，并确保两者匹配。我的猜测是，如果您更改 padding: 0px 20px 0 20px;到 padding: 20px 20px 20px 20px; 它将是方形的。