Как центрировать меню суперфиш в WordPress (в IE7) - PullRequest
Новая
       30

Как центрировать меню суперфиш в WordPress (в IE7)

2 голосов
/ 20 сентября 2011

У меня есть блог WordPress с меню, которое я хотел оформить как выпадающее меню суперфиши, и я следовал этому уроку: http://kav.in/wordpress-superfish-dropdown-menu

Пока меню выглядит великолепно, но мне нужно, чтобы оно было отцентрировано, а не выровнено по левому краю. Вот мой код: 

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
}
.sf-menu {
    float:              left;
    width:              100%;
    text-align:center;
}
.sf-menu li {
    background:         transparent;
}
.sf-menu a {
    padding:            0px 15px;
    text-decoration:    none;
    line-height:        40px;
}
.sf-menu ul li a {
    padding:            0px 15px;
    text-decoration:    none;
}
.sf-menu li li {
    background:         #611718;
    text-align: left;
}

Элементы в моем меню, конечно, имеют переменную ширину.

У меня нет html без всех классов sf, но это простой список, примерно такой: 

 <div id="navwrap">

    <ul class="sf-menu">

    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a></li>
    <li><a href="#">List item</a>
        <ul>
            <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        </ul>
    </li>
   </ul>
 </div>

Редактировать: я нашел способ центрировать его, но он не работает в IE7.

Хорошо, я попробовал подход, который нашел при поиске в Google, и он работал до тех пор, пока я не проверил IE7, похоже, что inline-block полностью разрушает меню: 

#navwrap .sf-menu {
   text-align: center;
}
#navwrap .sf-menu li {
   display: inline-block; 
   float: none;
}
#navwrap .sf-menu li a {
   display: inline-block;
}

Это страница, над которой я работаю: http://hermandaddelcalvario.org/wordpress/ Вы можете проверить верхнее меню в IE7, когда оно ломается.

Ответы [ 2 ]

2 голосов
/ 20 сентября 2011

IE7 не нравится встроенный блок для элементов, которые изначально являются элементами уровня блока.
Но вы не используете поля для li s, так почему бы вместо этого не использовать display: inline;?Я думаю, что это не будет иметь никакого значения.

Кажется, что использование inline делает меню исчезающим.
Удаление float: left;, кажется, исправляет это.

(Почему менюВ любом случае, это не имеет никакого значения.)

0 голосов
/ 20 сентября 2011

Вы можете попробовать что-то вроде этого: 

.wrapper{
    position: relative;
    left:     50%;
    width:    100%;

}

#navwrap {
    float:              left;
    width:              100%;
    background:         url(images/bg.png) repeat transparent;
    text-transform:     uppercase;   
    font-size:          12px;
    height:             40px;
    position:           relative;
        left:           -25%;
}

И иметь #navwrap внутри .wrapper.Список не будет по-настоящему центрирован, но на самом деле он настолько близок, насколько это возможно.

...