代码之家 › 专栏 › 技术社区 › rory-h

css-并排画2个正方形,每个正方形的中心有一个圆

css3 css

0

rory-h · 技术社区 · 7 年前

我正在尝试一个css挑战,其中要求声明:

并排画两个宽度为50px的正方形
两个正方形之间的距离应为10px

我似乎无法使我的圆圈出现。。这是我的小提琴- https://jsfiddle.net/xmozvs5p/

  .square {
    width:50px;
    height:50px;
    border:1px solid black;
    display:inline-block;
    margin:10px;
  }
  .circle{
    background-color:green;
    border-radius: 50%;
    width:10px;
    display:block;
    margin:auto;
    }

2 回复 | 直到 7 年前

1

2

Paulie_D 7 年前

将高度添加到 .circle

.square {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 10px 5px; /* 10px between elements */
}

.circle {
  background-color: green;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: block;
  margin: auto;
}

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

2

1

Temani Afif 7 年前

您也可以用更少的代码尝试这种方法:

.square {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  background:radial-gradient(circle at center,green 5px,transparent 6px);
  margin: 10px 5px;
}

<div class="square">
</div>
<div class="square">
</div>