Обивка на фоновом изображении при наведении, создавая дополнительное нежелательное пространство

Question

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

Мой jsfiddle: http://jsfiddle.net/leongaban/G9dFa/

Я попытался отрегулировать отступ фонового изображения при наведении, однако добавление необходимых 20 пикселей также добавляет дополнительный интервал.Переход к 0 не позволяет фоновому изображению заполнить пространство: (

Любые советы приветствуются! :)

HTML:

<div class="nav">
    <div id="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">LINK 3</a></li>
            <li><a href="#">LINK 4</a></li>
            <li><a href="#">OUR BLOG</a></li>
        </ul>
    </div>

    <div id="search">

    </div>
</div>

CSS:

.nav {
  width: 994px;
  height: 27px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav.gif');
}

#nav ul li {
  height: 27px;
  margin: 0;
  padding: 8px 20px 6px 20px;
  line-height:30px;
  text-align: center;
  font-size: 11px;
  border-right: 1px solid #fff;
  display: inline;
}

#nav ul li a {
  padding: 8px 0px 6px 0px;
  color: white;
  text-decoration: none;
}

#nav ul li a:hover {
  width: 100%;
  height: 100%;
  padding: 8px 20px 6px 20px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif');
}

Answer 1

Вот, пожалуйста.Изменили некоторые CSS.У вас была накладка на ли, когда она должна была быть на якоре.Изменены ваши li, чтобы плавать влево вместо отображения: inline;Сделал фоновое изображение для фона и добавил повтор оси X.

http://jsfiddle.net/G9dFa/6/

    .nav {
  width: 994px;
  height: 27px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav.gif');
}

#nav ul li {
  height: 27px;
  margin: 0;
  line-height:30px;
  text-align: center;
  font-size: 11px;
  border-right: 1px solid #fff;
  float:left;
}

#nav ul li a {
  padding: 8px 20px 6px 20px;
  color: white;
  text-decoration: none;
}

#nav ul li a:hover {
  width: 100%;
  height: 100%;
  /*-webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;*/
  background:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif') repeat-x;
}​

Answer 2

Вот, пожалуйста.

http://jsfiddle.net/r9dTG/

РЕДАКТИРОВАТЬ:

Ничего себе, мы все придумали аналогичные результаты, единственное, что я хотел бы подчеркнуть, что с заявленнымВысота строки в верхней части тега LI и в нижней части тега привязки не имеет большого смысла.Я бы использовал один или другой, а не оба, так как математика не складывалась так или иначе, меньше для вычисления и обслуживания.

Answer 3

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

• убрать обивку с LI
• добавить отступ к тегу привязки

---

#nav ul li a {
    width: 100%;
    height: 100%;
    padding: 8px 20px 6px 20px;
    color: white;
    text-decoration: none;
}

#nav ul li a:hover {
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif');
}​

DEMO

Answer 4

Поместите все стили на тег A.Избавьтесь от всего на LI, кроме display:inline.Добавьте display:block к вашему A тегу.

Answer 5

вам не нужно заполнять <li>, попробуйте удалить его, и оно должно работать

Answer 6

Аналогично Diodeus:

Поместите все стили в свой тег привязки a.

Измените стиль тега привязки на display: inline-block.

Отображать встроенныйУ элементов -block есть странная ошибка в некоторых браузерах, когда, если между пунктами есть ЛЮБОЙ пробел, он создает странный пробел.Чтобы это исправить, вам нужно исправить свой HTML, чтобы поставить элементы li в конец.т.е. фактически УДАЛИТЕ пробелы между ними.

Вот пример с вашим кодом:

http://jsfiddle.net/leongaban/G9dFa/