简单的html/css曲-我如何得到两种字体大小在同一行

Question

我想要一个span，在这个span中我想要有两种不同大小的文本。但我希望他们能在一起。

我试过把两个跨度放在一起，我试过把它们放在一个div里，我试过把它们放在单独的div里，我试过浮动它们……

不能让它工作:(

我知道这可能很简单，有什么灵魂可以帮助吗?

这是div淡出的一部分，下面是代码:

<div id='message' style="display: none;">
    <span class="big">Wow, that was quick! </span><span>- below is a preview of your page, fill the form below and click publish.</span>
    <a href="#" class="close-notify">X</a>
</div>

css:

#message {height:30px;width:100%;z-index:105;text-align:center;color:white;padding:10px 0px 10px 0px;background-color:#8E1609;display:inline;}
#message span {text-align: center;width: 95%;float:left;}
.close-notify {white-space: nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}
.close-notify a {color: #fff;}
.big{font-size:1.3em;}

javascript:

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

Answer 1

这是因为你的第一个span有width: 95%。只要把它去掉，一切都会好起来的

http://jsfiddle.net/qcnZA/

Answer 2

两个跨度对我来说很好。可能还有其他原因让你无法成功。

<div>
    <span style="font-size:10px">Small</span>
    <span style="font-size:20px">Big</span>
</div>

http://jsfiddle.net/TUCr6/1/

Answer 3

你可以张贴你的代码吗?

<span class="bold">Bold</span><span class="red"> and red</span>

如果父元素是内联的，

应该显示在一行。