What is the best way to position a <label> to the left of an <input> field?

Question

What is the best way to position a <label> to the left of an <input> field?

Examining the HTML and CSS code below:

* {
    box-sizing: border-box;
}

.field {
  overflow: auto;
}
  
.field label {
  float: left;
  width: 80px;
}

.field input {
  display: block;
  width: 100%;
}

<div class="field">
  <label>Test</label>
  <input type="text">
</div>

Regardless of using Firefox or Chromium, the output appears as follows:

However, my intention is for the <input> to be displayed on the same line as the <label>. Essentially, like this:

Why does setting float: left; not position the label to the left of the input?

css forms css-float

Answer 1

Answer №1

When you set the width of the text input to 100% and make it a block element, the text box will occupy the entire width of the line, causing it to move to the second line. There are multiple ways to achieve what you are trying to do. One approach is to specify a fixed width for the text input (in pixels or less than 100%) to achieve the desired outcome.

.field label {
  float: left;
  width: 20%;
}
.field input {
  display: block;
  width: 80%;
}

UPDATE

I noticed your response to another answer where you wanted to maintain the 100% width on the input. You can accomplish this without arbitrarily selecting a fixed width by using the table/table-cell CSS classes. The field needs to span the full width and be defined as a table. Remove the float property and set the label and input elements as table cells.

.field {
    display: table;
    width: 100%;
}

.field > label,
.field > input {
    display: table-cell;
}

.field > input {
    width: 100%;
}

Fiddle: http://jsfiddle.net/1rhtgzf0/1/

Answer 2

When you set the width of the text input to 100% and make it a block element, the text box will occupy the entire width of the line, causing it to move to the second line. There are multiple ways to achieve what you are trying to do. One approach is to specify a fixed width for the text input (in pixels or less than 100%) to achieve the desired outcome.

.field label {
  float: left;
  width: 20%;
}
.field input {
  display: block;
  width: 80%;
}

UPDATE

I noticed your response to another answer where you wanted to maintain the 100% width on the input. You can accomplish this without arbitrarily selecting a fixed width by using the table/table-cell CSS classes. The field needs to span the full width and be defined as a table. Remove the float property and set the label and input elements as table cells.

.field {
    display: table;
    width: 100%;
}

.field > label,
.field > input {
    display: table-cell;
}

.field > input {
    width: 100%;
}

Fiddle: http://jsfiddle.net/1rhtgzf0/1/

Answer 3

Answer №2

Inspired by Bootstrap's design principles ():

.field {
    border-collapse: separate;
    display: table;
    position: relative;
    width: 400px;
}

label {
    display: table-cell;
    width: 1%;
}
input {
    display: table-cell;
    float: left;
    position: relative;
    width: 100%;
}

<div class="field">
  <label>Test</label>
  <input type="text">
</div>

Answer 4

Inspired by Bootstrap's design principles ():

.field {
    border-collapse: separate;
    display: table;
    position: relative;
    width: 400px;
}

label {
    display: table-cell;
    width: 1%;
}
input {
    display: table-cell;
    float: left;
    position: relative;
    width: 100%;
}

<div class="field">
  <label>Test</label>
  <input type="text">
</div>

Answer 5

Answer №3

It is essential to allocate enough space for your design...

* {
    box-sizing: border-box;
}

.section {
  overflow: hidden;
}

.section label {
  float: right;
  width: 15%;
}

.section input {
  display: inline-block;
  width: 85%;
}

Answer 6

It is essential to allocate enough space for your design...

* {
    box-sizing: border-box;
}

.section {
  overflow: hidden;
}

.section label {
  float: right;
  width: 15%;
}

.section input {
  display: inline-block;
  width: 85%;
}

Answer 7

Answer №4

Remember that a label and input are separate elements, so setting the width of the input textbox to 100% will force it beneath the label. To fix this, you can set float: left; on the input element and remove the width from .field input.

Here is an alternative solution:

* {
    box-sizing: border-box;
}

.field {
  overflow: auto;
}

.field label {
  float: left;
  text-align:right;
  width: 80px;
}

.field input{
  float:left;
}

<div class="field">
   <label>Test</label>
   <input type="text">
</div>`

Answer 8

Remember that a label and input are separate elements, so setting the width of the input textbox to 100% will force it beneath the label. To fix this, you can set float: left; on the input element and remove the width from .field input.

Here is an alternative solution:

* {
    box-sizing: border-box;
}

.field {
  overflow: auto;
}

.field label {
  float: left;
  text-align:right;
  width: 80px;
}

.field input{
  float:left;
}

<div class="field">
   <label>Test</label>
   <input type="text">
</div>`

What is the best way to position a <label> to the left of an <input> field?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

looking to change the background color of a CSS element

Programmatically extracting a list of utilized CSS images from IE WebBrowser (IHTMLDocument2)

Can someone please help me figure out why the "setInterval" function in my script isn't functioning as expected?

Tips for extending the space between one element and another when the width decreases:

Creating sibling classes with tailwind using the map function

I'm curious about the specific sequence of CSS properties order recommended by Stylelint. Where can I locate

Using a single form, the rest of the form fields are restricted when uploading images with Ajax

What could be causing the tooltip to malfunction in jQuery?

Enter the ISO code for the country in an HTML form to submit

Understanding the Intrinsic Dimensions of Replaced Elements in CSS

Instructions on placing the bottom of an inline-block element flush with the bottom of a block element

What are the different approaches for creating a website that adapts to different screen sizes and devices

What is the best way to convert this JavaScript iteration function into jQuery?

Having trouble with blueprintjs icons not appearing as they should on certain pages

Jquery deactivates the CSS hover effect

I'm experiencing an issue where the links in my dropdown button are not showing when I hover over it. What could

Looking to access the layout details of an HTML element similar to what can be done in Firefox's debugger tool?

What are the steps to position this bootstrap drop-down menu above a fixed page header?

Using Data URIs can negatively impact the loading speed of a webpage

Challenge with modifying CSS variable names in Angular SSR