Question 193833 in Html Question posted in
Some basic documentation can be found here.

Html – Putting inputs under labels

I’ve been trying for days but I couldn’t make this work, how do I achieve this? I can’t figure it out, how do I put two labels (fname lname) on the same line and under them the corresponding inputs?here’s a sketch of what i wanna do

I know it’s an easy task for you all but I’m stuck on it, I can do it but they end up on separate lines or I only get the first one done but the label on the second one disappears

Tags:

2

Answers


  1. 0

    Here you go, no need for flex/grid:

    label {
  display: inline-block;
}

input {
  display: block
}
    <label>
  First Name
  <input/>
</label>
<label>
  Last Name
  <input/>
</label>
    Login or Signup to reply.
  2. 0

    As the commenter noted, CSS Grid is going to be your preferred approach for this type of setup. Here is a working example.

    Here is your HTML

    <div class="container">
    <div><label for="fname">First Name</label></div>
    <div><label for="lname">Last Name</label></div>
    <div><input type="text" name="fname"></div>
    <div><input type="text" name="lname"></div>
</div>

    Then the CSS to setup your grid:

    .container {
  display: grid; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
}

    So what is this doing? There are different types of display values within CSS. Many HTML elements have default values, such as a div has a display of block whereas our input elements have an inline-block. This tells the browser how to do layout of that element.

    So in our case, we’re first going to set it to leverage a relatively new layout paradigm called grid. CSS Grid is powerful because it allows you to define layouts in two dimensions. CSS Grid items are its direct descendants which is why I added seemingly pointless divs as container elements for each item.

    So let’s dig into what each line is doing.

    display: grid – This tells the browser to use Grid when laying out that element

    grid-template-columns: 1fr 1fr; – This is defining how many columns we want our grid to have and how to size them. We’re going to use the flexible length unit (fr) in order to size both columns.

    grid-template-rows: 1fr 1fr; – Like rows, this is defining how many columns we want our grid to have and how to size them.

    grid-auto-rows: 1fr; – Grid is powerful, and even though we’ve defined that we’ll have a 2×2 grid there are scenarios where new content may be inserted that the CSS author wasn’t aware of. If there isn’t a cell that the un-accounted for item can be placed into then CSS Grid will create a new row to insert the content into, these are known as implicit rows and columns. Here we’re defining how large we want those rows to be if there ends up being more than two rows of content.

    CSS Grid is very powerful and I highly recommend Rachel Andrew’s "Grid by Example" and just clicking from the first one until the end and you’ll have a rather strong grasp on how to use CSS Grid.

    Have fun!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search