Question

基本上，我试图在容器内放置两个圆圈（而不是顶部）。

然而，他们之间有一个空间，我想摆脱它。如何将两个（或更多）圆圈组合在一起？

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

Answer 2

使用display: inline-block;代替display: block;。
并将margin: 0 5px;提供给.container .circle，以便在它们之间留出空间。

您也可以使用float:left。

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

Updated Fiddle

Answer 3

尝试将float添加到.container .circle

float:left

检查此https://jsfiddle.net/hLsu9qj0/2/

Answer 4

更新：'multiple elements' finder methods

可选：这是为了重叠两个圆圈。看看JsFiddle 第二种方式：JsFiddle

HTML：

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

   }

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

CSS：

np.vectorize

Answer 5

在circle div中使用float left

.container .circle {float:left;}

勾选此http://jsfiddle.net/hLsu9qj0/9/

Answer 6

你应该简单地添加float：left;到圆圈类。为了保证良好的对齐，我建议修复容器的宽度和高度，并设置：高度：100％到圆圈，检查链接： //jsfiddle.net/hLsu9qj0/

Answer 7

you can use inside the container 2 div 
    <div class="container">
      <div class="col-md-6">
      </div>
   <div class="col-md-6">
  </div>
</div>

put your code inside the 2 div column it defiantly works bootstrap but you need bootstrap css link inside your .html page

Answer 8

如果要将它们居中，请将.container的宽度更改为.container { clear: both; overflow: hidden; width: 23%;}

如何将两个形状相同的圆圈放在一起？

8 个答案: