Горизонтальное меню отображается неправильно на широкоэкранном мониторе

Question

У меня небольшая проблема с горизонтальным меню, которое я реализовал для веб-сайта.Меню содержит только три элемента, но при просмотре на довольно большом широкоэкранном мониторе последний элемент отображается на новой строке.Я сам не могу проверить это, поскольку широкоэкранный монитор используется моим клиентом, и хотя я не могу воспроизвести ошибку, они прислали мне этот снимок экрана.

клиент использует Internet Explorer 8 в Windows 7, и я протестировал этот браузер и ОС на мониторе обычного размера, который, кажется, работает.Кажется, проблема в широкоэкранном режиме.

Вот как выглядит страница на моем экране и на каждом последующем экране, на котором я тестировал.

Вот код, который у меня есть для меню.

HTML

<div class="menu">
    <ul class="nav">
        <li class="nav-item" id="first-item"><a href="/why-us.php">WHY US</a></li>
        <li class="nav-item"><a href="/links.php">LINKS</a></li>
        <li class="nav-item"><a href="/contact.php">CONTACT</a></li>
    </ul>
</div>

CSS

.nav-item {
    font-size:2em;
    margin-left:175px;
}

.nav-item a {
    color:#2B2F73;
}

.nav {
    list-style-type:none;
    padding:0;
    margin:auto;
    width:744px;
}

.nav li {
    list-style-type:none;
    float:left;
    display:inline;
}

#first-item {
    margin-left:0px !important;
}

.menu {
    width:960px;
    height:40px;
    margin:auto;
}

Может ли кто-нибудь определить какие-либо явные ошибки в моем коде, которые могут вызывать эту ошибку?

Answer 1

попробуйте уменьшить ширину в .nav-item, .nav и .menu

Если это не поможет, укажите ссылку, где это было размещено. Чтобы мы могли проверить их и быстро ответить вам.

Answer 2

Проблема в том, что для них установлен размер шрифта "Размер текста" (или, возможно, "Самый большой"):

Ваш код здесь , и он выглядит точно так же, как скриншот клиента с текстом "Larger" в IE8.

Теперь вы можете воспроизвести проблему, и вы сможете ее исправить.

Я бы дал более подробные инструкции, но это трудно сделать без возможности просмотра всего сайта.

Часть "широкоэкранный монитор" не имеет значения - вы объявляете width: 960px на крайнем контейнере (.menu). Это будет 960px независимо от ширины экрана.

Answer 3

Попробуйте это .nav-item { Размер шрифта: 2em; Левое поле: 5em; }

Конечно, если chrome (браузер пользователя) слишком сильно увеличивает размер текста, независимо от того, что он в итоге сломается, если вы используете ems, поскольку они, конечно, основаны на размере текста.

<subjective> В целом, рекомендуется использовать проценты для размеров текста и использовать пиксели для полей / отступов / расстояний для лучшей согласованности между браузерами.

Также хорошей идеей является использование css для сброса (например, YUI base-reset-fonts.css) </subjective>

Answer 4

Я бы посоветовал немного поиграть с вашими width тегами.

Как насчет удаления одного из них в "nav"?

Извините, этоне вопрос задавать здесь.Эту проблему очень легко решить, вы можете сами разобраться, если попытаетесь что-то изменить ...

Мой лучший совет по этому вопросу - получить хороший инструмент для "тестирования" CSS и увидеть результат"жить".Я доволен расширением Firefox / Chrome FireBug (но результат не сохраняется, его нужно скопировать и вставить).