Align 3 inputs in the same row with label above-CodePudding

I have a small issue here with aligning three input fields in the same row with equal space between each other.

I tried to do it with display: flex and space-between but then the label is placed left to the input and not on-top.

What I want to achieve is as followed:

Then if there is more inputs I want it to "break a row" and start a new 3 input row.

How can I achieve it ?

Code snippet:

/*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>

CodePudding user response：

I think this is what you want. I hope my code is helpful to you.

/*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>

CodePudding user response：

display: flex implementation

.dInput {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 33%;
  flex: 33%;
}

.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">
  <div class="input-wrapper">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
  <div class="input-wrapper">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
  <div class="input-wrapper">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
  <div class="input-wrapper">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
  <div class="input-wrapper">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
</div>

CodePudding user response：

With css grid :

/*Stage 3 input group*/
.dInput{
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: space-between;
  justify-items: center;
  background-color: violet;
  gap: 1em;
  padding: 1em;
}

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

.dInput input {
  padding: 5px;
  background-color: #495057;
  border-radius: 4px;
  max-width: 8em;
  margin-top: 1em;
}
.dInput-item {
  justify-self: center;
  text-align: center;
}

<div class="dInput" v-if="activeStage == 3">
  <div class="dInput-item">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
  <div class="dInput-item">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
  <div class="dInput-item">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
  <div class="dInput-item">
    <label for="name">Username*</label>
    <input type="text" id="name">
  </div>
</div>

CodePudding user response：

Wrap each label and input in a div

<div class="dInput">
  <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>

css:

.dInput{
  margin-top: 15px;
  display:flex;
  justify-content: space-between;
}