Use flexbox to arrange labels and input fields in a single line for better display

Question

Use flexbox to arrange labels and input fields in a single line for better display

I've been working on a project where I need to lay out labels and input fields on separate lines using flexbox.

            <form  class="form">
              <label> Credit Card Number </label>
              <input type="search" name="creditcard" placeholder="4831-0948-9417-4341">

              <label>Date</label>
              <input type="date" name="date">

              <label for="cvc">Cvc</label>
              <input type="text" name="cvc" placeholder="809">

            <label for="postcode">Zip</label>
            <input type="number" name="postcode" placeholder="94100">

              <input type="submit" value="Search">
            </form>

http://codepen.io/o-sewell/pen/egPGYm?editors=1100

html css flexbox

Answer 1

Answer №1

Did you mean something like this?

      .label {
        display: block;
      }

      .form {
        display: flex;
      }

      .cell{
        float: left;
      }

<form  class="form">
  <div class="cell">
    <label> Credit Card Number </label></br>
    <input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
  </div>
  <div class="cell">
    <label>Date</label></br>
    <input type="date" name="date">
  </div>
  <div class="cell">
    <label for="cvc">Cvc</label></br>
    <input type="text" name="cvc" placeholder="809">
  </div>
  <div class="cell">
    <label for="postcode">Zip</label></br>
    <input type="number" name="postcode" placeholder="94100">
  </div>
  <div class="cell">
    <input type="submit" value="Search">
  </div>
</form>

Answer 2

Did you mean something like this?

      .label {
        display: block;
      }

      .form {
        display: flex;
      }

      .cell{
        float: left;
      }

<form  class="form">
  <div class="cell">
    <label> Credit Card Number </label></br>
    <input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
  </div>
  <div class="cell">
    <label>Date</label></br>
    <input type="date" name="date">
  </div>
  <div class="cell">
    <label for="cvc">Cvc</label></br>
    <input type="text" name="cvc" placeholder="809">
  </div>
  <div class="cell">
    <label for="postcode">Zip</label></br>
    <input type="number" name="postcode" placeholder="94100">
  </div>
  <div class="cell">
    <input type="submit" value="Search">
  </div>
</form>

Answer 3

Answer №2

Thanks for your help, I believe I have figured it out based on your response.

<form  class="form">
              <div class="cell">
              <label> Credit Card Number </label>
              <input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
              </div>
              <div class="cell">
              <label>Date</label>
              <input type="date" name="date">
              </div>
              <div class="cell">
              <label for="cvc">Cvc</label>
              <input type="text" name="cvc" placeholder="809">
              </div>
              <div class="cell">
              <label for="postcode">Zip</label>
              <input type="number" name="postcode" placeholder="94100">
              </div>
              <input type="submit" value="Search">
            </form>


    form {
      display: flex;
    }

    .cell {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

Answer 4

Thanks for your help, I believe I have figured it out based on your response.

<form  class="form">
              <div class="cell">
              <label> Credit Card Number </label>
              <input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
              </div>
              <div class="cell">
              <label>Date</label>
              <input type="date" name="date">
              </div>
              <div class="cell">
              <label for="cvc">Cvc</label>
              <input type="text" name="cvc" placeholder="809">
              </div>
              <div class="cell">
              <label for="postcode">Zip</label>
              <input type="number" name="postcode" placeholder="94100">
              </div>
              <input type="submit" value="Search">
            </form>


    form {
      display: flex;
    }

    .cell {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

Use flexbox to arrange labels and input fields in a single line for better display

Answer №1

Answer №2

Similar questions

JavaScript: Issue with triggering form submit event

The canvas is either displayed solely on the first image of the slider or attached to the bottom of every image

Generating an interactive tooltip for an image using a click event (html, scss)

The CSS styling in Internet Explorer 11 is causing cells to merge into the same column in a table

Using regular expressions to extract URLs from code in Python

Tips for preventing browsers from losing style information stored in inputs

How can we prevent having an abundance of jQuery confirmation dialog boxes and instead focus on reusing them

Leveraging the power of HTML validation while silencing the constant flood of messages

Active State of Menu Items

Tips for embedding HTML/CSS snippets in backticks when using TypeScript with AngularJS

Bootstrap Modals Fail to Appear

Displaying iFrame Border in React Native WebView

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

Expand the <div> to match the complete height of its containing <div> element

Simple method to incorporate a CSS border, shadow effect, and rounded edges to enhance my content

What is the best way to insert content using AJAX into a Twitter Bootstrap modal dialog box?

A guide on effectively selecting an element with the '@font-face' tag

Vue.js transition-group does not apply the *-move class

"Using HTML to assign a unique identifier to an image within

Utilizing CSS Media Queries for Page Layout Adaptation