Расстояние между элементами навигации

Question

Расстояние между элементами навигации

0

Я работал над своим навигационным меню в автономном режиме, выглядел нормально локально, но когда я загрузил его в Интернете, половина изменений не вступила в силу для Chrome, а в Firefox все еще давала мне другой дизайн, чем то, что я пытаюсь создать. Просто интересно, что я могу делать неправильно здесь. Я предоставил ссылку на дизайн и живой URL-адрес для текущего прогресса.

Несколько вещей, которые я пытаюсь исправить:

1 - Просто пытайтесь получить правильную конструкцию. 2 - Между каждым пунктом меню пробегает пробел, нужно также удалить его.

Дизайн: http://cl.ly/RSwr

URL: http://www.jordancharters.co.uk/nakedradish

HTML

<div id="navigation"> 
                        <ul>
                            <li class="home-nav-bg"><a href="#"></a>
                            <li class="how-nav-bg"><a href="#">Example Us</a>
                            <li class="boxes-nav-bg"><a href="#">Example</a>
                            <li class="recipes-nav-bg"><a href="#">Example</a>
                            <li class="food-nav-bg"><a href="#">Example</a>
                            <li class="kitchen-nav-bg"><a href="#">Example</a>
                            <li class="nav-end-bg"><a href="#"></a></li>
                        </ul>
                </div>

CSS

    #navigation {
    margin-top: 10px;
    margin-bottom: 20px;
    float: right;
    width: 700px;
    margin-right: -50px;
}

#navigation ul {
    text-decoration: none;
    list-style-type: none;
    display: block;
}

#navigation li {
    font-size: 0.8em;
    color: #fff;
    display: inline;
    text-align: right;
}

#navigation li a {
    font-size: 0.8em;
    color: #fff;
    display: inline;
    padding-left: 20px;
    padding-right: 20px;
    text-align: right;
}

.home-nav-bg {
    background-image: url('../img/home-nav-bg.png');
    padding-right: 40px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.how-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.boxes-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.recipes-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.food-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.kitchen-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.nav-end-bg {
    background-image: url('../img/nav-end-bg.png');
    padding-left: 5px;
    padding-right: 12px;
    padding-top: 17px;
    padding-bottom: 45px;
}

mcvities 18 сен. 2013, в 16:25

Источник

Теги:

html

css

navigation

2 ответа

Ещё вопросы

Jeffpowrs · Answer 1 · 2013-09-18T12-54-00.000Z

Проблема с встроенными и встроенными блочными элементами заключается в том, что браузер накладывает пробелы между ними, потому что эти элементы, как правило, связаны с текстом, например слова.

Вы можете установить их для отображения блока и поплавки или использовать один из методов, описанных в этом сообщении. Обычно я предпочитаю использовать встроенный блок.

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Спасибо, это очень помогло. У меня сейчас проблема в том, что на Chrome vs Firefox он выглядит совершенно иначе. Firefox в порядке, Chrome не отображает никаких отступов в каждом элементе списка.
Ваши изменения живут на вашем сайте?
Да уж. Если вы посмотрите прямо сейчас, это все еще немного по-другому на Chrome и Firefox. Остановимся на несколько минут после этого поста, чтобы люди могли посмотреть.
Если его ответ помог вам с вашей первоначальной проблемой, пожалуйста, подтвердите / примите его.

Adedayo Moshood · Answer 2 · 2013-09-18T12-45-00.000Z

Попробуйте использовать это

#navigation li{
 font-size: 0.8em;
 color: #fff;
 display: inline;
 text-align: right;
 float: left;
 height: 48px;
 line-height: 48px;
}
.nav-end-bg{
background-image: url('../img/nav-end-bg.png');
width: 111px;
height: 75px !important;
}

это прекрасно работает.