如何将三个点均匀分布为瘦汉汉堡菜单图标？

Question

我希望代码显示3个条形,3个点最终显示为下拉选项.出于某种原因,3个点中的第1个不希望正确间隔.

#dropdown {
  background: #3f51b5;
  padding: 30px;
  margin: 0px;
}

#dot {
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 50%;
  float: right;
}

#bar {
  width: 25px;
  height: 3px;
  background: white;
  margin: 5px;
}

<div id="dropdown">
  <div id="dot"></div>
  <div id="bar"></div>
  <div id="dot"></div>
  <div id="bar"></div>
  <div id="dot"></div>
  <div id="bar"></div>
</div>

返回的图片:

Answer 1

这对浮子很难.一种可能的解决方案是将点和条包裹在div中.之后,您可以按照您喜欢的样式定位那些包装div.我在下面的代码片段中使用了flexbox.

#dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #3f51b5;
  padding: 30px;
  margin: 0px;
}

.dot {
  width: 5px;
  height: 5px;
  margin: 5px;
  background: white;
  border-radius: 50%;
}

.bar {
  width: 25px;
  height: 3px;
  background: white;
  margin: 5px;
}

<div id="dropdown">
  <div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

ps:你应该使用关键字class而不是id重复元素.这可能仍然有效,但被认为是不好的做法,可能会破坏使用它的javascript实现id.