asp：Label和span的HTML / CSS定位问题

Question

When I do the following:

<asp:Label CssClass="someField" runat="server">*</asp:Label> 
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>

Or:

<span class="someField">*</span>
<asp:Label ID="someID" runat="server" Text="SomeText" AssociatedControlID="someACID"></asp:Label>

Css someField:

span.someField {
   color: #CC0000;
   font-weight: 600;
}

Css for label:

form label {
    clear: left;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 1em;
    margin: 0 3px 4px 0;
    padding: 4px 0 4px 5px;
    width: 200px;
}

the output I get is

SomeText*

When what I want is

*SomeText

Anyone know why this is happening?

Answer 1

By setting float:left on the label you are taking it out of the flow of the document and causing it to render before the span. You need to either set the span to be a block layout and float it left as well or remove the float from the label.

UPDATE:

There's a good description of what floating does to elements and some considerations here: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 2

Another option

form label:after {
    content: "*";
}