html - 如何将两个圆形的 div 并排放置？

Question

基本上，我试图将两个圆圈放在一个容器内(而不是放在顶部)。

但是，它们之间有一个空格，我想去掉它。如何将两个(或更多)圆圈放在一起？

https://jsfiddle.net/hLsu9qj0/

<div class="container">
  <div class="circle">
    circle 1
  </div>
  <div class="circle">
    circle 2
  </div>
</div>

CSS:

.container {
    position: relative;
    margin: 0 auto;
    line-height: 50px;
    height: 50px;

}

.container .circle {
        height: 50px;
        width: 50px;
        background-color: blue;
        border-radius: 50%;
        text-align: center;
        margin: 0 auto;
        display: inline;
    }

感谢大家的帮助!!!

Answer 1

看起来您的 CSS 中缺少的只是一个 float: left在 .container .circle { 上规则

已更新

居中问题(来自评论)的一个潜在解决方案可能是制作 .container div 圆圈的大小和中心

.container {
   position: relative;
   margin: 0 auto;
   line-height: 50px;
   width: 100px;
}

.container .circle {
    height: 50px;
    width: 50px;
    background-color: blue;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 0 auto;
    float: left;
}

或者，正如其他人建议的那样使用 display: inline-block然后设置 text-align: center在 .container 上

.container {
   position: relative;
   margin: 0 auto;
   line-height: 50px;
   text-align: center;
}

.container .circle {
    height: 50px;
    width: 50px;
    background-color: blue;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
}