html - 向右浮动将标签文本向上推

Question

我将从描述我想要完成的事情开始。我有一个页面，上面有一个字段集，其中包含一个标签的 div 和两个按钮。我希望标签向左对齐，而按钮都向右对齐。我曾尝试这样做，但我发现结果与我需要的有点不同，而且我在破解它一段时间后不明白为什么。

这是我的 HTML:

<fieldset class="main">
    <div class="inner clearfix">
      <label id="label1">Successfully Completed!</label>
                    <button type="button" class="dbBtn" id="dbCopyNewDb">Proceed</button>
                    <button type="button" class="dbBtn" id="dbCopyRestart">Start Over</button>
    </div>
</fieldset>

这是我的 CSS:

.main {
}

.inner {
    border: 1px solid #000000;
    vertical-align: middle;
    height: 30px;
}
.dbBtn{
  float: right;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

我注意到，当我将按钮向右浮动时，我的文字会稍微向上推。虽然这看起来微不足道，但我更愿意找到一种方法来纠正这个问题，并真正垂直对齐我的标签和 div 中间的按钮。

我尝试使用 text-align right 而不是 float: right 和 vertical-align: middle 以便将我的标签放在我的 div 的中间，但这些似乎什么都不做。我试过查看其他 SO 帖子，但解决方案对我不起作用。我怎样才能完成我打算做的事情，更重要的是，在这种情况下我做错了什么/忽略了什么？

Answer 1

这看起来是使用 CSS Flexbox 的好机会。

• justify-content: flex-end 表示子元素将朝向 .inner 的右侧。
• flex: 1 0 50% 表示label将占据至少50%的.inner 并且可以扩展到两个按钮左侧的任何可用空间。

工作示例:

.inner {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 3px;
border: 1px solid #000000;
height: 30px;
}

label {
flex: 1 0 50%;
}

.dbBtn {
margin: 0 0 0 3px;
}

<fieldset class="main">
<div class="inner">
<label id="label1">Successfully Completed!</label>
<button type="button" class="dbBtn" id="dbCopyNewDb">Proceed</button>
<button type="button" class="dbBtn" id="dbCopyRestart">Start Over</button>
</div>
</fieldset>