削减孩子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 /直接查看你的懒人：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 提前致谢！

Answer 1

将<input whole-number="" type="text" maxlength="20" class="......" ng-model="pList.pNumber" bs-typeahead="typeahead_ProjectNumber" placeholder="enter a value" data-provide="typeahead" ng-change="reduceScrollMax()"> 添加到父级。

＆＃13;

＆＃13;

overflow:hidden

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需添加overflow：隐藏在示例中

.example{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  font-weight: bold;
  color: #333;
  overflow: hidden;
}