Html 如何在矩形中画圆

我想创建一个矩形，其中有几个黑色圆圈。
以下是我尝试过的一些方法：
学校：

.dot{
高度：25px；
宽度：25px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
}

---

下面是我使用列表元素制作的模型：

<div id="rectangle">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

工作示例：

.dot{
高度：25px；
宽度：25px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
}
.矩形{
背景：黑色；
显示：内联块；/*使矩形成为所有圆的宽度*/
}

---

您可以做类似的事情，并使用bootstrap的网格

如果你不想使用引导，你可以添加一个

float:left每个圆的div内

<div style="border: 1px solid black">
  Rectangle
  <div style="border-radius: 50px; border: 1px solid black">
    Circle
  </div>
  <div style="border-radius: 50px; border: 1px solid black">
    Circle
  </div>
  <div style="border-radius: 50px; border: 1px solid black">
    Circle
  </div>
</div>


长方形
圆圈
圆圈
圆圈
圆圈必须包含某些内容吗？否则，您可以使用
&bull？一个包含圆圈的矩形顺便说一句，两个片段都为我显示了圆圈。最后一个不是内联的原因是因为它是块，您需要给它
display:inline块如何将其放置在黑色矩形中？你可以从你的代码中改进我的代码笔，我会在我的Web服务器中尝试。我认为加载问题是本地的，在我所有的浏览器中都可以。可能是连接问题？请不要使用内联样式（特别是当TS已经表现出理解类时），最好在答案中保持一个稍微好一点的代码练习：）此外，引导网格根本不需要，只会为4个css行所能做的事情增加很多权重。还有，小费；尝试使用
display:inline block
代替float。它有点感性（项目之间不能有空格），但会给你更清晰的代码，更容易做出响应：）我会记住：）对不起，没问题，我们都来学习。学习如何制定正确的答案是其中之一：）
<div style="border: 1px solid black">
  Rectangle
  <div style="border-radius: 50px; border: 1px solid black">
    Circle
  </div>
  <div style="border-radius: 50px; border: 1px solid black">
    Circle
  </div>
  <div style="border-radius: 50px; border: 1px solid black">
    Circle
  </div>
</div>