How to Align Input Elements and Labels on the Same Line in HTML?

Aligning Input Elements with Labels on the Same Line

In HTML, it is often desirable to place a label and an input element on the same horizontal line. However, determining the ideal width for the input element to fill the remaining space can be challenging.

Issue:

The standard approach, using width: auto;, results in a static width for the input element. Alternatively, width: 100%; moves the input to a new line.

Solution:

To achieve the desired alignment, consider the following CSS techniques:

Option 1: Floating Label and Overflow

HTML:

<code class="html"><label for="test">Label</label>
<span><input name="test" id="test" type="text"></span></code>

CSS:

<code class="css">label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}</code>

This method utilizes the overflow: hidden property to align the input element with the label by preventing line breaks.

Option 2: Table Display

HTML:

<code class="html"><div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text"></span>
</div></code>

CSS:

<code class="css">.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}</code>

This approach utilizes the display: table property to create a table-like layout, where the label has a fixed width and the input element expands to fill the remaining space.

The above is the detailed content of How to Align Input Elements and Labels on the Same Line in HTML?. For more information, please follow other related articles on the PHP Chinese website!