Float <span> on right and the rest(text) on left, within <div> in ie 7

Question

I have some text and <span> tag, which are inside a <div> .

<span> is float: right; I need the text to be on the left side and <span> on right side.

In every browser it displays perfectly except ie7 . How can I fix this bug?

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title> Testing page</title>
    </head>
    <body>
        <div style="border:2px solid #000; display:inline;"> 
            welcome<span style="float:right"> demo</span>
        </div>
    </body>
</html>

Answer 1

在文本之前移动跨度，这应该有所帮助。

Answer 2

Make span as block element and move it.

Ie

span{
  display: block;
  float: right;
}

Answer 3

是否可以将文本包含在<p>并具有该display: inline ？

Answer 4

User the following css it will work. DEMO LINK

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    }
.container {
    border:2px solid #000;
    padding:20px;
    overflow:hidden;
    height:100%;
    }
.container span {
    display:inline-block;
    *float:left;
    }

Float <span> on right and the rest(text) on left, within <div> in ie 7

Question

4 answers

solution1
9 ACCPTED 2013-07-04 12:54:26

solution2
3 2013-07-04 13:04:08

solution3
1 2013-07-05 05:08:21

solution4
0 2013-07-04 13:00:10

Float <span> on right and the rest(text) on left, within <div> in ie 7

Question

4 answers

solution1 9 ACCPTED 2013-07-04 12:54:26

solution2 3 2013-07-04 13:04:08

solution3 1 2013-07-05 05:08:21

solution4 0 2013-07-04 13:00:10

solution1
9 ACCPTED 2013-07-04 12:54:26

solution2
3 2013-07-04 13:04:08

solution3
1 2013-07-05 05:08:21

solution4
0 2013-07-04 13:00:10