Question

我试图将我的文字对齐为单行。我尝试了一切vertical-align：middle，vertical-align：bottom ..请帮帮我： 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>

Answer 2

只需为这两个元素提供相同的line-height。

#menu, .row{
    line-height: 40px; /* change this value as needed */
}

还要更改John Smith所提到的HTML。

Working Fiddle

不同大小的文本在div中位于同一行

2 个答案: