html - 不同大小的文本在 div 中的同一行上

Question

我试图将我的文本对齐到单行。我尝试了所有垂直对齐:中间，垂直对齐:底部..请帮助我: http://jsfiddle.net/2wDEw/

我的简单示例如下所示:

                <div class="logo spanHalf"><a href="#"> My site </a></div>
                <nav id="menu" class="spanHalf">
                    <li><a href="#">Fetured</a></li>
                    <li><a href="#">Latest Posts</a></li>
                    <li><a href="#">Contacts</a></li>
                </nav>

还有我的造型:

#menu {
    float : right;
    display:inline-block;
    vertical-align:middle;
}

#menu li{
    padding : 10px;
    display:inline;
    vertical-align:middle;
}

#menu a, .logo a {
    text-decoration:none;
    text-transform:uppercase;
    color: black;
    font-weight:bold;
}

#menu a:hover, .logo a:hover {
    color: red;
}

.logo {
    float:left;
    display:inline-block;
    vertical-align:middle;
    font-size : 28px;
}

期望的结果:

我的网站推荐最新的帖子联系方式

Answer 1

但是您的示例是无效的 html，li 必须嵌套在 ul 或 ol 中使用 span istead，这也是您的问题，因为对于 li，客户端浏览器会计算一些填充以使其看起来像一个列表，即使没有样式表，除非你覆盖它

http://jsfiddle.net/2wDEw/2/

                <nav id="menu" class="spanHalf">
                    <span><a href="#">Fetured</a></span>
                    <span><a href="#">Latest Posts</a></span>
                    <span><a href="#">Contacts</a></span>
                </nav>