Moh*_*asi 3 html css css-shapes
正如你在这里看到的,我有两个div.每个div都有不同的文本.两个div都具有相同的样式,但带有id的div days是完美的圆形,但带有id的div hour就像一个椭圆形.我怎样才能制作hour圆形？
这是我的代码:
.component {
color: white;
border: 1px solid white;
border-radius: 50%;
display: inline;
padding: 20px;
}
body {
background-color: black;
margin: 20px;
}<body>
<div class="component" id="days">71</div>
<div class="component" id="hour">5</div>
</body>这是因为当你说出类似的话:
border-radius: 50%;
根据MDN文档(https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius),"横轴的百分比是指盒子的宽度"
因此,由于您要内联显示元素,因此.component元素的宽度正是其内容的宽度.其中一个解决方案是显示元素内联块并强制它们为正方形,这样无论内容大小如何,应用border-radius:50%属性都会使它们成为完美的圆圈.
这是我建议的解决方案:
1)显示内联块中的.components元素,以便我可以根据它们的宽度和高度进行操作.
2)给它们的宽度和高度正好与填充物的尺寸相同,这样它们就不会拉得太远.
3)应用text-align:center以确保数字正确居中(第二个数字有问题).
这是我建议的代码的演示:
.component{
color:white;
border:1px solid white;
border-radius:50%;
display:inline-block;
padding:20px;
height: 20px;
width: 20px;
text-align:center;
}
body {
background-color: black;
margin: 20px;
}<body>
<div class="component" id="days">71</div>
<div class="component" id="hour">5</div>
</body>希望这可以帮助 !