По какой-то причине в следующем скрипте навигатор не идеально по центру. Это не так много, может быть, 3 мм на моем мониторе, но это меня раздражало.
Здесь фрагмент того, что, по моему мнению, может быть проблематичным кодом (но также проверить скрипку/сначала):
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 940px;
text-align: left;
}
.nav {
padding: 0px;
text-align: center;
}
Использование display: inline-block
будет означать, что ваши элементы не "сливаются" друг против друга. Так что наличие фона действительно покажет это. Я предполагаю, что вы использовали поле -4px в <a>
.
Вариант 1 - отображение: встроенный блок
Если вы должны использовать display: inline-block
то я предлагаю удалить -4px на <a>
и использовать margin: 0 -2px
на ли. Это принесет его с обеих сторон. Вы можете видеть, как это работает здесь (обратите внимание, что я позволил сделать границу только 1 пиксель):
Вариант 2 - плавать
Использование float приведет к тому, что элементы списка будут сливаться рядом друг с другом. Однако использование text-align: center
на контейнере не будет теперь центрироваться. Вам нужно будет определить ширину и использовать margin: 0 auto
.
Вариант 3 - дисплей: таблица
Это мой любимый вариант. Это способ сделать элементы списка идеально подходящими в контейнере. Вам не нужно определять ширину (px или%) в элементах списка или дочерние элементы. Они ведут себя как ячейки в таблице.
Чтобы показать начальную проблему яснее (как я ее понимаю), вот красивая картина.
Попробуйте установить максимальную ширину на вашей обертке
.wrapper {
margin: 0 auto;
margin-top: 3em;
max-width: 940px;
text-align: left;
}
Он сосредоточен. Но он центрируется на основе width
, указанной вами для обертки. Просто изменил 940px
на 500px
и он отлично работал здесь.
Если вы действительно хотите что-то, что работает каждый раз, вы можете использовать %
.
Что-то вроде этого:
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 90%;
text-align: left;
}
насколько я вижу, он не сосредоточен на 4px: 4px вы устанавливаете как отрицательный запас для каждой ссылки
margin-right: -4px;
избавиться от него и использовать другой метод, чем отображение: inline-block (например, float) или просто удалить любое свободное пространство, и разрывы строк между элементами списка сделают это.
Пытаться
.navigation ul
{
list-style: none;
padding: 0;
width: 90%;
margin: 0 auto;
}
а также
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 90%;
text-align: left;
}
width
вы указали дляwrapper
. Просто изменил940px
на500px
и это сработало.