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

Question

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

我试过将两个 span 并排放置，我试过将它们放在一个 div 中，我试过将它们放在单独的 div 中，我试过 float 它们...

无法让它工作:(

我知道这可能非常简单，任何好心人都可以帮忙吗？

都是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/