gpt4 book ai didi

html - 如何在单个 div 元素中绘制四个圆圈?

转载 作者:太空宇宙 更新时间:2023-11-04 14:37:12 24 4
gpt4 key购买 nike

我无法在单个 div 中绘制四个圆圈,因为我想使用圆圈创建菜单。请帮助我更正代码。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="menu">
<ul>
<li class="circle">
</li>
<li class="circle">


</li>
<li class="circle">


</li>
<li class="circle">


</li>
</ul>
</div>
</body>

</html>

样式.css

.menu ul {

list-style-type: none;
}
.menu li {
display: inline;

}
.circle {
border-radius: 140px;
width: 140px;
height: 140px;
background: #00b4ff;
margin-left: 75px;


}

最佳答案

将您的菜单 li 显示属性更改为 inline-flex。

.menu ul {
list-style-type: none;

}
.menu li {
display : inline-flex;
}
.circle {
border-radius: 20px;
width: 20px;
height: 20px;
background: #00b4ff;
margin-left: 15px;


}

内嵌 block 也可以

关于html - 如何在单个 div 元素中绘制四个圆圈?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23580181/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com