Hi,
The label tag doesn't have the property 'width', so how should I control the width of a label tag?
Regards
Javi
+9
A:
Using CSS, of course...
label { display: block; width: 100px; }
The width attribute is deprecated, and CSS should always be used to control these kinds of presentational styles.
Josh Stodola
2010-05-12 16:05:27
But that leads to a break in the code, which is probably what the OP **doesn’t** want in the first place.
Konrad Rudolph
2010-05-12 16:07:41
@Konrad Then the OP can use `float` or `display: inline-block`
Josh Stodola
2010-05-12 16:08:12
@Josh Stodola: Yup, that’s what I wanted to get at. :-) This is the core aspect here, since it’s the difficult part. Merely setting `width` won’t have much use.
Konrad Rudolph
2010-05-12 21:12:42
+2
A:
Inline elements (like P, SPAN, LABEL, etc.) are displayed so that their height and width are calculated by the browser based on their content. If you want to control height and width you have to change those elements' blocks.
display: block; makes the element displayed as a solid block (like DIV tags) which means that there is a line break after the element (it's not inline). Although you can use display: inline-block to fix the issue of line break, this solution does not work in IE6 because IE6 doesn't recognize inline-block. If you want it to be cross-browser compatible then look at this article: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html
Srka
2010-05-12 16:28:26