html - 如何使用 CSS 水平平均分布元素

Question

我使用 CSS 水平排列了 11 个点。如何根据浏览器窗口的宽度在元素(我的是 <span> 元素)之间均匀分布间距？

到目前为止，这是我的示例代码:

span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ddd;
  position: absolute;
  left:0;
  top: 45px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
#second{
  left: 190px;
}
#third{
  left: 380px;
}
#fourth{
  left: 570px;
}
#five{
  left: 760px;
}
#six{
  left: 950px;
}
#seven{
  left: 1140px;
}
#eight{
  left: 1330px;
}
#nine{
  left: 1520px;
}
#ten{
  left: 1710px;
}
#eleven{
  left: 1900px;
}

<span id="first" class="border-change circle"></span>
<span id="second" class="circle"></span>
<span id="third" class="circle"></span>
<span id="fourth" class="circle"></span>
<span id="five" class="circle"></span>
<span id="six" class="circle"></span>
<span id="seven" class="circle"></span>
<span id="eight" class="circle"></span>
<span id="nine" class="circle"></span>
<span id="ten" class="circle"></span>
<span id="eleven" class="circle"></span>

Answer 1

使用 flexbox，你可以做这样的事情:

.parent {
    display: flex;
    justify-content: space-between;
}

span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ddd;   
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

<div class="parent">
    <span id="first" class="border-change circle"></span>
    <span id="second" class="circle"></span>
    <span id="third" class="circle"></span>
    <span id="fourth" class="circle"></span>
    <span id="five" class="circle"></span>
    <span id="six" class="circle"></span>
    <span id="seven" class="circle"></span>
    <span id="eight" class="circle"></span>
    <span id="nine" class="circle"></span>
    <span id="ten" class="circle"></span>
    <span id="eleven" class="circle"></span>
</div>

JSFiddle Demo