CODEWITHSUNDEEP
htmlcss
Rahul Desai
Rahul Desai

Reputation: 15491

CSS not getting applied to <label>

I am developing a form and setting a size for the label and aligning it right so as to look decent. However the CSS is not getting applied. Here is my code:

label{
    width: 50%;
    text-align: right;
}

Fiddle

How do I get this working?

Upvotes: 3

Views: 1249

Answers (5)

Krish
Krish

Reputation: 1894

fiddle : http://jsfiddle.net/46xF5/7/

change the css code like this

body{
    font-family: "Arial", Helvetica, sans-serif;
}
/*changes here*/
#book_tickets label{
    width: 50%;
    display:inline-block;
    text-align: left;
}

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

LIke this

demo

css

label{
    width:50%;
    text-align: right;
    border:1px solid red;
    display:inline-block;
}

Upvotes: 1

Karuppiah RK
Karuppiah RK

Reputation: 3964

add display:inline-block in your label Fiddle

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240878

You could make it an inline-block element:

UPDATED EXAMPLE HERE

label{
    width: 50%;
    text-align: right;
    display:inline-block;
}

You need to do this because a label is an inline element, and the following applies to it:

10 Visual formatting model details - 10.2 Content width: the 'width' property

This [width] property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats

Upvotes: 2

saman khademi
saman khademi

Reputation: 842

try (i test in your fiddle)

display:inline-block;

fiddle demo

Upvotes: 3

Related Questions