Flex容器中的项目重叠

Question

当我尝试这段代码时，两个点以及文本彼此重叠。

为什么？我怎样才能让他们并肩？

.container {
  display: flex;
  flex-direction: row;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: black;
}

<div class="container">
  <span class="dot" />
  <span class="dot" /> some text
</div>

Answer 1

因为您没有正确关闭跨度

      .container {
        display: flex;
        flex-direction: row;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: black;
      }

    <div class="container">
      <span class="dot"></span>      
      <span class="dot"></span>     
      some text
    </div>