How to Align Input Element with Label on the Same Line?

Aligning Input Element with Label on the Same Line

In web design, it's often desirable to position a label and its corresponding input field on the same line, with the input field expanding to fill the remaining width of its container. However, this poses a challenge as CSS properties like "width: 100%;" typically cause the input to wrap to a new line.

To overcome this issue, there are two approaches:

Approach 1: Overflow Hidden and Float

This approach involves floating the label to the left and setting the input to have an overflow of hidden and a span to wrap around it. The span has zero padding on the left side and 6px on the right to account for the width of the label.

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

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

Approach 2: Display Table-Cell

Another option is to use the "display: table-cell" property. The container is set to "display: table," which creates a table-like layout, while the label and input are placed inside table cells. The label is given a width of 1px to prevent wrapping, and the input is set to have a left padding of 5px for spacing.

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

<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>

Both methods effectively achieve the desired alignment with cross-browser compatibility. Developers can choose the approach that best suits their specific needs and project requirements.

The above is the detailed content of How to Align Input Element with Label on the Same Line?. For more information, please follow other related articles on the PHP Chinese website!