Выравнивание по вертикали в HTML / CSS - PullRequest
Новая
       24

Выравнивание по вертикали в HTML / CSS

0 голосов
/ 02 декабря 2010

Я пытаюсь создать header, состоящий из h1 и nav элемента. Я хочу, чтобы нижняя часть nav была выровнена с нижней частью h1.

Вот что я пробовал:

HTML 

<header>
    <h1>Web site Header</h1>
      <nav>
         <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
         </ul>
       </nav>
 </header>

CSS 

header {vertical-align: bottom; width: 100%; height: 300px;}
h1 {vertical-align: bottom; float: left;}
nav {vertical-align: bottom; float: right;}
nav ul li {display: inline;}

Я мог бы сделать это, установив точные поля для своих элементов, но я подумал, что это будет чище (если это возможно). Любой совет, как это исправить / если это можно сделать?

Спасибо!

Ответы [ 2 ]

1 голос
/ 02 декабря 2010

Как можно чистее: 

<style>
    header > * { display: inline-block; }
    nav li { display: inline; }
</style>

Прямые header потомки теперь являются встроенными блоками, то есть они не толкают окружающий контент, чтобы течь под ними, однако они все еще могут использовать свойство margin и padding в качестве блоков.

0 голосов
/ 03 декабря 2010

Это можно сделать разными способами.Поля предназначены для позиционирования, но если вы не хотите использовать поля или отступы, вы можете использовать абсолютное позиционирование:

CSS: 

header
{
  display: block;
  height: 300px;
  width: 100%;
}
h1
{
  float: left;
  margin: 0;
  height: 32px;
}
nav
{
  display: block;
  height: 32px;
  position: relative;
}
nav ul
{
  bottom: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
}
nav ul li
{
  display: inline-block;
}

HTML: 

<header>
  <h1>Web site Header</h1>
  <nav>
    <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    </ul>
  </nav>
</header>

Это основано на знании высоты заголовка и установке одинаковых значений высоты / полей заголовка и навигационной панели.

...