削减孩子divs作为圈子

Question

我正在尝试制作一个整洁的装载栏,但为此我需要你的帮助.

我正在尝试在css中完成一些看起来像这样的东西: 使用以下html:

<div class="example">
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
</div>

这是我到目前为止所做的事情(我知道的并不多):Codepen/Direct视图为你懒惰的:

.example{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  font-weight: bold;
  color: #333;
}
.example-inner{
  width:100%;
  height:20px;
  border: 1px solid black;
}

<div class="example">
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
</div>

提前致谢!

Answer 1

添加overflow:hidden到父级.

* {
  box-sizing: border-box;
}
.example {
  border-radius: 50%;
  overflow: hidden;
  /* add this */
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  font-weight: bold;
  color: #333;
  border: 1px solid black;
}
.example-inner {
  height: 20px;
  border: 1px solid black;
}

<div class="example">
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
  <div class="example-inner"></div>
</div>