Home/ Questions/Q 9253651
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:16:20+00:00

The following code seems to render the input field on the line below its

  • 0

The following code seems to render the input field on the line below its label in all browsers:

<html>
<head>
    <style type="text/css">
    label { display:inline-block; width:75px }
    </style>
</head>
<body>
    <form>
        <label>First Name <input type="text" name="first_name" size="30" maxlength="30"/></label>
    </form>
</body>
</html>

This is how it appears:

First Name
[input field]

My understanding is that inline-block should allow for a fixed width for the label, whilst still permitting the input element to be inline. This is how I expected it to appear:

First Name [input field]

Why does the addition of a fixed width for the label in this instance not allow for both elements to appear inline?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Albeit your version is semantically correct, you have to do it like this to get your desired behavior:

    HTML

    <form>
  <label for="first_name">First Name</label><input type="text" name="first_name" id="first_name" size="30" maxlength="30"/>
</form>

    CSS

    label {
  display:inline-block;
  width:75px;
  cursor: pointer;
 }

    Fiddle

    That way, the label and the input are separated from each other and can flow free. If the label holds the input, that is not the case; even when setting the label to display: inline-block.

    • 0