Why the time part can't locate to the right side and the same line with the test one

<ul>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
        <li><a href="#">test one<span>2011-06-21</span></a></li>
      </ul>

the css:

ul {
    line-height:28px;
}

ul li a {
    padding-left:20px;
    color:#2e2e2e;
    font-size:14px;
    text-shadow:#FFF 1px 1px;
}

ul li a span {
    float:right;
}

why the date part can’t locate to the right side and the same line with the test one text under IE7,6? but ok under firefox. how to correct it. thank you

An easy way to make that work is to move the span first:

<li><a href="#">[COLOR="Red"]<span>2011-06-21</span>[/COLOR]test one</a></li>

yeah,you’re right. why changes the order. it can ok under IE?

anyone helps? why changes the order. it can ok under IE?

If you change the order, it will work in IE. Is that what you are asking?

yeah,you’re right.

So you are happy, or is there still a question? There are no doubt other ways to do this, but that’s the easiest. If you want to keep the order of the HTML, you could set the text to text-align: right and wrap the span around the “test one” and float that left instead of floating the date to the right.

<li><a href=“#”><span>test one</span>2011-06-21</a></li>

Floats must come first before the content that you want them to wrap around. A float will float either left or right from the position it finds itself in. As a float is basically a block display element it will start on a new line which means that any content that came before will always be above it.

Only following content will wrap around the float. If this wasn’t the case then all floats would go to the top of the monitor and stay there and be useless :slight_smile:

There is one caveat to this and if a float starts on the same line as some inline content then the content on that single line is displaced to allow the float to occupy its position. This is the part that IE7 and under get wrong and for them floats must always come first. Therefore if you want some text next to a float then make sure the float is first in the html.

If you don’t want to change the order of the text in the html then wrap the span around the first segment and set it to float:left and the set the parent to text-align:right .

e.g.


li{text-align:right;overflow:hidden}
li span{float:left}


<li><a href="#">[B]<span>test one</span>[/B]2011-06-21</a></li>

many thanks ,Paul O’B .you made me know a lot.