0

How does one set a label width for all labels?

CSS:

label {
    width: 180px;
}

HTML:

<label for = "customerName">Name:</label><input type = "text" name = "customerName" required><br>

but the label is "Name:" length. I expected that the label will be 180px wide. It's the same width whether the css code exists or not.

j08691
  • 204,283
  • 31
  • 260
  • 272
Nimbocrux
  • 509
  • 2
  • 10
  • 27

2 Answers2

4

Use display: inline-block;

Explanation:

The label is an inline element, meaning it is only as big as it needs to be.

Set the display property to either inline-block or block in order for the width property to take effect.

LogicalDesk
  • 1,237
  • 4
  • 16
  • 46
2

Labels are by default inline elements. Inline elements don't take width or height. Make them inline-block and then try. Use display:inline-block

Nitesh
  • 1,490
  • 1
  • 12
  • 20