如何在矩形中绘制圆

Question

我想创建一个矩形，其中将有多个黑色圆圈。
这是我尝试过的一些方法：
w3school：

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
} 

<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span> 

在边缘不显示任何内容。 另一个：

.circle{
  border-radius: 100%;
  background: black;
  width: 35px;
  height: 35px;
}

<div class="circle"></div>
<div class="circle"></div>

那将不会在一行中显示两个圆圈。 我测试了更多版本，但是它们没有用。 这是我想要做的一个大概版本：

Answer 1

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.rectangle {
  background: black;
  display: inline-block; /* Makes the rectangle the width of all circles */
}

<div class="rectangle">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

或者：

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.rectangle {
  background: black;
  width: 116px; /* Limit width for wrapping */
}

<div class="rectangle">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

Answer 2

这是我使用列表元素进行工作的模型：

<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>

和CSS

#rectangle {
      width:500px;
      border:2px solid #000;
      padding:20px;
}
li {
      list-style-type: none;
      display:inline-block;
      height: 50px;
      width: 50px;
      background-color: #bbb;
      border-radius: 50%;
}

工作示例：https://codepen.io/FEARtheMoose/pen/vzOBqo?editors=1100#0

Answer 3

您可以执行类似的操作，并使用bootstrap的网格。

如果您不想使用Bootstrap，只需在每个Circle的div内添加一个float: left;

<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>