时间戳

首页 > 解决方案 > 将同一行中的 3 个输入与上面的标签对齐

html - 将同一行中的 3 个输入与上面的标签对齐

问题描述

我在这里有一个小问题，将同一行中的三个输入字段对齐，彼此之间的空间相等。

我尝试使用display: flexand space-between 来做到这一点，但随后标签被放置在输入的左侧而不是顶部。

我想要达到的目标如下： 例子

然后，如果有更多输入，我希望它“打破一行”并开始一个新的 3 个输入行。

我怎样才能实现它？

代码片段：

/*Stage 3 input group*/
.dInput{
  margin-top: 15px;
}

.dInput label {
  display: block;
  padding: 6px;
  color: #f8f9fa;
}

.dInput input {
  padding: 5px;
  margin-left: 5px;
  width: 33%;
  background-color: #495057;
  border-radius: 4px;
}
<div class="dInput" v-if="activeStage == 3">
  <label for="name">Username*</label>
  <input type="text" id="name">
  <label for="name">Username*</label>
  <input type="text" id="name">
</div>

标签： htmlcssvue.js

解决方案

我想这就是你想要的。希望我的代码对你有帮助。

/*Stage 3 input group*/
.dInput{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  margin-top: 15px;
}

.dInput label {
  text-align:center;
  display: block;
  padding: 6px;
  color: #000;
}

.dInput input {
  padding: 5px;
  margin-left: 5px;
  background-color: #495057;
  border-radius: 4px;
}
<div class="dInput" v-if="activeStage == 3">
  <div><label for="name">Username*</label>
    <input type="text" id="name"></div>
  <div><label for="name">Username*</label>
    <input type="text" id="name"></div>
  <div><label for="name">Username*</label>
    <input type="text" id="name"></div>
  
</div>
<div class="dInput" v-if="activeStage == 3">
  <div><label for="name">Username*</label>
    <input type="text" id="name"></div>
  <div><label for="name">Username*</label>
    <input type="text" id="name"></div>
  <div><label for="name">Username*</label>
    <input type="text" id="name"></div>
  
</div>

推荐阅读