Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Объясните поведение...

Автор: shtuceron 19.5.2012, 14:00

Добрый день,

я сейчас перемалываю стили стандартной темы 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>

http://s1.ipicture.ru/uploads/20120519/5Sg577be.png

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

Автор: Aliance 19.5.2012, 18:30

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

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

Автор: shtuceron 19.5.2012, 21:00

Цитата

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