Моё css навигационное меню отказывается центрироваться в браузере? - PullRequest
Новая
       16

Моё css навигационное меню отказывается центрироваться в браузере?

2 голосов
/ 22 июня 2011

Я перепробовал все места, чтобы поставить 

margin-right: auto

и 

margin-left:auto

Использование 

display: inline-block

прекрасно работает с реальными ссылками, но в противном случае портится в меню, если добавлено как родительский.

Мне кажется, что для центрирования в окне просмотра браузера мне нужно будет потерять некоторые стили. Я чувствую, что существует конфликт между некоторыми аспектами стиля, которые мешают центрированию.

Я надеюсь, что я неправ, и это возможно с чьим-то предложением (ями) ...

С уважением, Dale

Вот мой CSS: 

.navigation {
    height: auto
    width: 96%;
    border-top-color: rgb(119,120,122);
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: rgb(119,120,122);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-top: 1%;
    margin-right: auto;
    margin-bottom: 1%;
    margin-left: auto;
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: transparent;
    background-image: none;
}

ul {
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
}

ul li {
    display: inline;
}

ul li ul {
    display: none;
}

ul li:hover ul {
    height: auto;
    width: 96%;
    display: block;
    position: absolute;
    margin-right: auto;
    margin-left: auto;
}

ul li a {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 0.15%;
    margin-bottom: -0.2%;
    padding-top: 1.25%;
    padding-right: 1.4%;
    padding-bottom: 1.25%;
    padding-left: 1.4%;
}

ul li:hover ul a {
    margin-right: -0.2%;
    margin-bottom: 0;
}

P.S. Я забрал свои комментарии и любые несущественные коды, я понимаю, что я пишу в длинном CSS, но мне нравится это делать; -)

Ответы [ 2 ]

4 голосов
/ 22 июня 2011

Причина, по которой он не отображается по центру, заключается в том, что ul, удерживающий меню, не имеет указанной ширины; следовательно, это рендеринг на 100% ширины; другими словами, левые / правые поля, находящиеся в авто, не имеют никакого эффекта.

Попробуйте добавить text-align: center к ul, чтобы li s, будучи встроенными, могли центрироваться.

1 голос
/ 22 июня 2011

Самый простой способ - добавить ширину к верхнему уровню <ul>, например: 

ul {
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    width:80%;
    text-align:center;
}

Редактировать: Извините, я неправильно прочитал вопрос, я думал, вы просто хотели, чтобы все меню не охватывало всю ширину окна, а не центрировало содержимое меню. text-align:center; добавлено в мой ответ, как уже предлагал @Jacob.

...