How to put an input element on the same line as its label? - GeeksforGeeks

30 Jul, 2021
There are several approaches to make an input element the same as its label. Few approaches are discussed here. Basic CSS to label, span, and input to get clear outputs.
Using float and overflow attributes: Make a label and style it with float attribute. Now set the label float(position) left or right according to your requirement. This will align your label accordingly. Overflow property for input is used here to clip the overflow part and show the rest.
Example:<!DOCTYPE html><html lang="en">  <head>      <style>        h1 {            color: green;        }                  label {            float: left;        }                  span {            display: block;            overflow: hidden;            padding: 0px 4px 0px 6px;        }                  input {            width: 70%;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <label for="test">Enroll with us:</label>    <span>        <input name="test" id="test"                type="text" placeholder="Enter your input"/>    </span></body>  </html>
<!DOCTYPE html><html lang="en">  <head>      <style>        h1 {            color: green;        }                  label {            float: left;        }                  span {            display: block;            overflow: hidden;            padding: 0px 4px 0px 6px;        }                  input {            width: 70%;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>    <label for="test">Enroll with us:</label>    <span>        <input name="test" id="test"                type="text" placeholder="Enter your input"/>    </span></body>  </html>
Output:
Using table cell attribute in display property: Make a label inside a div and give the display property. To make the input element and span as equally placed use table-cell attribute in those tags. This attribute makes the element behaves a td element. Whatever item is to be made nearby, the table-cell attribute does it.
Example:<!DOCTYPE html><html lang="en">  <head>      <style>        h1 {            color: green;        }                  .container {            display: table;            width: 100%        }                  label {            display: table-cell;            width: 1px;            white-space: nowrap;        }                  span {            display: table-cell;            padding: 0 4px 0 6px;        }                  input {            width: 70%;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>      <div class="container">        <label for="test">Enroll with us:</label>        <span><input name="test" id="test"                      type="text"                      placeholder="Enter your input" />        </span>    </div></body>  </html>
<!DOCTYPE html><html lang="en">  <head>      <style>        h1 {            color: green;        }                  .container {            display: table;            width: 100%        }                  label {            display: table-cell;            width: 1px;            white-space: nowrap;        }                  span {            display: table-cell;            padding: 0 4px 0 6px;        }                  input {            width: 70%;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>      <div class="container">        <label for="test">Enroll with us:</label>        <span><input name="test" id="test"                      type="text"                      placeholder="Enter your input" />        </span>    </div></body>  </html>
Output:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
Types of CSS (Cascading Style Sheet)
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)