Выровнять по вертикали два фрагмента текста с разными размерами шрифта с помощью CSS - PullRequest
Новая
       21

Выровнять по вертикали два фрагмента текста с разными размерами шрифта с помощью CSS

6 голосов
/ 22 марта 2012

В верхней части моей страницы я хочу, чтобы заголовок страницы был выровнен по левому краю экрана, а короткое навигационное меню выровнено по правому краю экрана. Я могу добиться этого, используя float, но два элемента имеют разные базовые линии, то есть базовая линия текста выглядит по-разному. Есть ли способ заставить это работать с использованием CSS? У меня есть пример того, что я пытаюсь сделать на jsfiddle http://jsfiddle.net/nBPCG/63/

Ответы [ 2 ]

1 голос
/ 22 марта 2012

Привет, вы можете использовать display: inline-block в вашем h1

или см. Скрипку: - http://jsfiddle.net/nBPCG/101/

0 голосов
/ 22 марта 2012

Сначала я бы предложил использовать 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;}

Fiddle: http://jsfiddle.net/nBPCG/98/

...