How to Align Labels and Inputs Horizontally with Dynamic Width in CSS?

Align Label and Input Horizontally with Dynamic Width

In web design, it's often necessary to position labels and their corresponding input elements on the same line. However, ensuring that the input element fills the remaining width regardless of the label's text can prove challenging.

To achieve this using CSS, consider the following techniques:

Overflow Hiding Technique

1. HTML: Use a label and span element to wrap the input:

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

2. CSS: Employ the overflow: hidden property on the span:

<code class="css">label {
    float: left; /* Align label to the left */
}
span {
    display: block;
    overflow: hidden; /* Key trick for adjusting input width */
    padding: 0 4px 0 6px; /* Add padding for visual consistency */
}
input {
    width: 100%;
}</code>

Table-Cell Display Technique

1. HTML: Enclose the label and input within a container div:

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

2. CSS: Utilize table display and table-cell properties:

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

These techniques effectively align the label and input horizontally while ensuring the input element fills the remaining width, adapting to the length of the label text.

The above is the detailed content of How to Align Labels and Inputs Horizontally with Dynamic Width in CSS?. For more information, please follow other related articles on the PHP Chinese website!