使用CSS垂直對齊具有不同字體大小的兩段文本

Question

在我的頁面頂部，我希望頁面標題與屏幕左側對齊，並在屏幕右側對齊一個簡短的導航菜單。 我可以使用float來實現這個，但是這兩個元素有不同的基線，即文本的基線看起來不同。 有沒有辦法讓這個使用CSS工作？ 我有一個關於我想在jsfiddle http://jsfiddle.net/nBPCG/63/做什么的樣本

Answer 1

您好，您可以在您的h1中使用display：inline-block

或者看小提琴： - http://jsfiddle.net/nBPCG/101/

Answer 2

首先，我建議使用ul來包裝鏈接而不是h3 ，這種結構沒有意義。 然后我只是在ul添加一些填充。 這是一個清理過的標記示例：

<article >
<header>
    <h1>This is Title</h1>
    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Works</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact</a></li>  
        </ul>
    </nav>
    <div class="clr"></div>
</header>
</article>

和風格：

body {
    font-family:"Verdana", Verdana, sans-serif;
    font-size: 1em;
    font-weight:400;
}

h1 {
    font-family:"Century Gothic", Verdana, sans-serif;
    font-size: 4em;
    font-weight:400;
    float: left;
    margin-left:10px;
}

header nav {
    margin-right: 10px;
    float: right;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 2em 0 0 0;
}

nav ul li {
    display: inline;
    font-size: 1.2em;
    font-weight:400;
}

nav a {
    padding: 0 1em;
    border-right: 1px solid #000;
}

nav li:last-child a {
    padding-right: 0;
    border-right: none;
}

.clr {clear:both;}

小提琴： http ： //jsfiddle.net/nBPCG/98/