Adding style to asp.net label

Question

I want to adding style to asp.net label, but it wont work.

ASP.NET Mark up
<asp:Label runat="server" ID="lblCommentText"/>

Generated from the backend: Html mark up
<span id="ctl02_ctl36_CommentText">Only the leave the comment please</span>

............................................

I want to add the following style to the label

{
 float:right;
 width:70%;
}

I've tried using

1. cssClass property

2. Add this lblCommentText.Attributes.CssStyle.Add("float", "right"); to backend

3. using javascript
   document.getElementById('<%= lblCommentText.ClientID%>').Style.display = ("float","right");

4. and also in-line style to the element

none of them works, can someone help me out ?

Answer 1

Labels are rendered as spans and spans are basically inline elements. You need to make it block or inline-block in order to get the float and width have effect.

.yourclass {
    display: inline-block;
    float: right;
    width: 70%;
}

And then simply use cssclass:

<asp:Label runat="server" ID="lblCommentText" CssClass="yourclass" />

Answer 2

Inline:

<asp:Label runat="server" ID="lblCommentText" style="float:right" />

Using class:

<style>
.styleclass{
   float: left;
}

</style>

<asp:Label runat="server" ID="lblCommentText" CssClass="styleclass" />

Using ID;

   <style>
    #ctl02_ctl36_CommentText {
       float: left;
    }

    </style>

 <asp:Label runat="server" ID="lblCommentText" />