CODEWITHSUNDEEP
htmlcss
Arif
Arif

Reputation: 13

Why does inline-block not render the elements inline in this code example?

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?

Upvotes: 1

Views: 349

Answers (3)

Sven
Sven

Reputation: 13295

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.

Upvotes: 3

keithjgrant
keithjgrant

Reputation: 12749

Your label wraps the input. 75px probably isn't enough width for both the text and input without word wrapping

Upvotes: 2

Riju Mahna
Riju Mahna

Reputation: 6926

This worked for me : Just make it display:inline

 <style type="text/css">
    label { display:inline; width:75px }
    </style>

Upvotes: -1

Related Questions