Выравнивание div и ul

Question

1. Мне нужно, чтобы меню (дома, портфолио, услуги, о) выровнялось по центру и слева.
2. Имя входа в div # должно быть справа

Как я могу выполнить эти задачи?

Чтобы решить первую проблему, я поставил div с display: inline; но по какой-то причине в заголовочном меню ul # остается место сверху

Чтобы решить вторую проблему, я попытался поместить div # header-login со 100% шириной и таким образом выровнять текст вправо, но не получилось.

Здесь - полный код:

Answer 1

Самый простой способ добиться этого - убедиться, что вы плаваете в заголовке.С текущим сочетанием некоторого числа с плавающей точкой и некоторого числа с плавающей точкой (плюс некоторые элементы с display: inline) это будет сложно управлять и потенциально проблематично, если вам это нужно для работы в более старых версиях Internet Explorer.

Я сделал несколько небольших модификаций для вашего jsFiddle.Это теперь плавает 3 элемента в заголовке и применяет очистку float к самому div заголовка, чтобы содержимое после заголовка очищалось правильно (есть также прокомментированные примеры того, как вам нужно сделать это для IE с условными таблицами стилей).

http://jsfiddle.net/y4Qyw/1/

Я специально не настраивал интервал, но теперь должно быть формально размещать все, где вы хотите, с некоторыми отступами и / или полем.Автоматическое вертикальное позиционирование в этой ситуации невозможно, если вы не работаете с display: table-cell (который не является полностью кросс-браузерным), поэтому вам просто нужно будет сместить меню по вертикали вниз, чтобы выровнять его по центру.

Answer 2

Вот сделка:

div#header
{
    clear:both;
    overflow:hidden;
}
div#header-login
{
    text-align: right;
    overflow:hidden;
    float:right;
    margin-top:-30px;
}
img#header-logo
{
    display: block;
    float:left;
}

ul#header-menu
{
    margin: 0 auto;
    padding: 15px;
    display: block;
    list-style-type: none;
    overflow:hidden;
}