Arrange three input fields horizontally with labels positioned above each

Question

Arrange three input fields horizontally with labels positioned above each

I am facing a minor problem with aligning three input fields in the same row while maintaining equal spacing between each of them.

I attempted to accomplish this using display: flex and space-between, but then the label appears to the left of the input instead of above it.

My desired outcome is as shown in the image below: https://i.sstatic.net/ic1rA.png

If there are more inputs, I would like them to "break a row" and begin a new row of three inputs.

How can I achieve this?

Here is a snippet of the code:

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

html css vue.js vuejs2

Answer 1

Answer №1

It seems like this is the solution you are looking for. I trust that my code will be beneficial to you.

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

Answer 2

It seems like this is the solution you are looking for. I trust that my code will be beneficial to you.

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

Answer 3

Answer №2

Utilizing the power of display: flex

.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>

Answer 4

Utilizing the power of display: flex

.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>

Answer 5

Answer №3

Using CSS grid:

/*Custom input group style using CSS Grid*/
.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>

Answer 6

Using CSS grid:

/*Custom input group style using CSS Grid*/
.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>

Answer 7

Answer №4

Enclose each label and input within their own div containers

<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 Style:

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

Answer 8

Enclose each label and input within their own div containers

<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 Style:

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

Arrange three input fields horizontally with labels positioned above each

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to create a number input field that also accepts text input?

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

The customized styling for Material Angular does not seem to properly apply to <md-card> elements within ui-views

Tips for customizing Material-UI Switch button appearance

Ensuring Consistent Height for Bootstrap Card Headers

Preventing the window from resizing while an AJAX query is in progress

Upgrading from Vue.js 1.x to 2.x: Understanding the Compilation Process

Choose and output all the tables contained within the database

What is the best way to start tiny-slider automatically once the video has ended?

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

Passing slots to child components within a VueJS application - A helpful guide

Managing various types of click events on a single element

Is there a solution for the error I encountered while processing data in Nuxt.js?

Optimizing Backend Access with Laravel and Vue JS: How to Choose the Most Effective Approach

Enhance text by hovering over it

Persisting Big IndexedDB in the Browser

Encountering permission issues while attempting to add `@nuxtjs/sentry` in a Docker container running Node 16.14. Installation

Connect a series of numerical input fields in Vue.js

Problem with Labels Overlapping and Blocking Text Fields

Creating evenly spaced PHP-generated divs without utilizing flexbox