VPF::Объясните поведение... - Форум программистов

shtuceron

Дата 19.5.2012, 14:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 17.2.2008

Репутация: нет
Всего: нет

Добрый день,

я сейчас перемалываю стили стандартной темы wordpress (работаю с меню) и никак не могу понять почему образуется зазор.

Код меню представлен ниже:

Код


<!DOCTYPE html>
<html>
<head>
<style>
/* Navigation Menu */
#access {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0px 0px;
    padding: 0px 0px;
    border: 1px green solid;
}
#access .menu-menu-container {
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0px 0px;
    padding: 0px 0px;
    border: 1px purple solid;
}
#access ul {
    display: block;
    width: 100%;
    margin: 0px 0px;
    padding: 0px 0px;
    font-size: 14px;
    text-align: center;
    list-style-type: none;
}
#access li {
    float: left;
    position: relative;
    
    border: 1px blue solid;
}
#access a {
    display: block;
    text-decoration: none;
}
</style>
</head>
<body>
<div id="page" class="hfeed">
    <header>
        <div id="access"  role="navigation">
            <div class="menu-menu-container">
                <ul>
                    <li>
                        <a>главная</a>
                    </li>
                    <li>
                        <a>регистрация</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
</div>
</body>
</html>

Зазор между синей и зеленой рамкой снизу картинки.

Объясните поведение, откуда он возникает?

Aliance

Дата 19.5.2012, 18:30 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Т.к. <li> с плавающими стилями (float), то нужно родительскому контейнеру (<ul>) задать очистку контента (clearfix, overflow:hidden, clear:both) + выставить скорее всего высоту элементов вручную.

Если убрать float:left то проблемы быть не должно, так что это из-за этого.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

shtuceron

Дата 19.5.2012, 21:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 161
Регистрация: 17.2.2008

Репутация: нет
Всего: нет

Цитата

Я задал родительскому элементу (<ul>) стили overflow:hidden, clear:both но ничего не изменилось, видимо прийдется в ручную прописывать...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »