对齐 div 内的按钮和按钮之间的跨度答案

【问题标题】：Aligning buttons inside div and span between buttons对齐 div 内的按钮和按钮之间的跨度
【发布时间】：2017-10-31 16:40:04
【问题描述】：

我有一个 div，其中有一些 3 个按钮和一个生成的 span。
我的问题是：

我可以在不使用边距的情况下将按钮与正方形对齐吗？
（第一个按钮是第一个方格开始的地方，最后一个按钮是最后一个方格结束的地方）

如何在两个按钮内对齐 span？

<div id="stripe">
  <button id="new">New Colors</button>
  <span id="message"></span>
  <button id="easy">Easy</button>
  <button id="hard">Hard</button>
</div>

Fiddle

【问题讨论】：

你的问题标题和上一个问题不匹配！你想要按钮，跨度，按钮=>对齐；或者你想在按钮内对齐跨度？？？
你是对的！我会编辑它

标签： javascript html css web responsive-design

【解决方案1】：

你可以这样做。您需要将 inside 字替换为 between 字。您的情况下的跨度不在按钮内。

button{
  background-color:darkblue;
  color:white;
  padding:5px 10px;
  border:none;
  font-size:20px;
}

#stripe >*{
  vertical-align:top;/*or bottom, middle....*/
}

<div id="stripe">
  <button id="new">New Colors</button>
  <span id="message">Some message</span>
  <button id="easy">Easy</button>
  <button id="hard">Hard</button>
</div>

【讨论】：