Почему этот навигационный центр не идеально отцентрирован?

0

По какой-то причине в следующем скрипте навигатор не идеально по центру. Это не так много, может быть, 3 мм на моем мониторе, но это меня раздражало.

http://jsfiddle.net/RMBs6/

Здесь фрагмент того, что, по моему мнению, может быть проблематичным кодом (но также проверить скрипку/сначала):

.wrapper {
    margin: 0 auto;
    margin-top: 3em;
    width: 940px;
    text-align: left;
}

.nav {
    padding: 0px;
    text-align: center;
}
  • 1
    Это центрировано. Но это центрирование на основе width вы указали для wrapper . Просто изменил 940px на 500px и это сработало.
  • 0
    @wendelbsilva действительно, вы правы должны были написать то же самое.
Показать ещё 1 комментарий
Теги:

5 ответов

1
Лучший ответ

Использование display: inline-block будет означать, что ваши элементы не "сливаются" друг против друга. Так что наличие фона действительно покажет это. Я предполагаю, что вы использовали поле -4px в <a>.

Вариант 1 - отображение: встроенный блок

Если вы должны использовать display: inline-block то я предлагаю удалить -4px на <a> и использовать margin: 0 -2px на ли. Это принесет его с обеих сторон. Вы можете видеть, как это работает здесь (обратите внимание, что я позволил сделать границу только 1 пиксель):

http://jsfiddle.net/RMBs6/6/

Вариант 2 - плавать

Использование float приведет к тому, что элементы списка будут сливаться рядом друг с другом. Однако использование text-align: center на контейнере не будет теперь центрироваться. Вам нужно будет определить ширину и использовать margin: 0 auto.

Вариант 3 - дисплей: таблица

Это мой любимый вариант. Это способ сделать элементы списка идеально подходящими в контейнере. Вам не нужно определять ширину (px или%) в элементах списка или дочерние элементы. Они ведут себя как ячейки в таблице.

http://jsfiddle.net/RMBs6/7/


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

Изображение 174551

  • 0
    поэтому я использовал -4px. Это сработало в то время. Кроме того, на моем компьютере левая сторона больше, а на вашей (насколько я понимаю из красивой картинки) - правая?
  • 0
    Это работало в то время, но не работает сейчас? На моей картинке левая сторона больше. Красным цветом выделена лишняя часть, чтобы сделать ее равной. Или, если хотите, вам нужно убрать красную ширину с левой стороны.
Показать ещё 4 комментария
0

Попробуйте установить максимальную ширину на вашей обертке

.wrapper {
            margin: 0 auto;
            margin-top: 3em;
            max-width: 940px;
            text-align: left;
        }
0

Он сосредоточен. Но он центрируется на основе width, указанной вами для обертки. Просто изменил 940px на 500px и он отлично работал здесь.

Если вы действительно хотите что-то, что работает каждый раз, вы можете использовать %.

Что-то вроде этого:

.wrapper {
  margin: 0 auto;
  margin-top: 3em;
  width: 90%;
  text-align: left;
}
0

насколько я вижу, он не сосредоточен на 4px: 4px вы устанавливаете как отрицательный запас для каждой ссылки

margin-right: -4px;

избавиться от него и использовать другой метод, чем отображение: inline-block (например, float) или просто удалить любое свободное пространство, и разрывы строк между элементами списка сделают это.

0

Пытаться

 .navigation ul 
{
  list-style: none;
  padding: 0;
  width: 90%;
  margin: 0 auto;
}

а также

.wrapper {
  margin: 0 auto;
  margin-top: 3em;
  width: 90%;
  text-align: left;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню