CSS Проблема меню

Question

мой CSS для меню

 ul#menubar { 
    width: 800px; 
    padding: 27px 10px 5px 10px; 
    list-style: none; 
    text-align: center; 
    } 

    ul#menubar li { 
display: inline; 
    } 
    ul#menubar li a{ 
border-right: 1px solid #111111; 
font: 12px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
padding: 5px 10px 8px 10px; 
    } 

    ul#menubar li a#last { 
border-right: none; 
    } 

    ul#menubar li a:hover, ul#menubar li a:active{ 
background: #8d4d09 url("images/hover.gif") bottom center no-repeat; 
padding-bottom: 8px; 
    } 

меню HTML

<ul id="menubar"> 
     <li><a href="#" target="_self">Home</a></li> 
     <li><a href="#" target="_self">Sale</a></li> 
     <li><a href="#" target="_self">Purchase</a></li> 
     <li><a href="#" target="_self">Rent</a></li> 
     <li><a href="#" target="_self">Developments</a></li> 
     <li><a href="#" target="_self">Interior Decorators</a></li> 
     <li><a href="#" target="_self">Maps</a></li> 
     <li><a id="last" href="#" target="_self">Legal Documents</a></li> 
    </ul> 

просмотр

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

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

Наведенный эффект показан на ссылке «Покупка».

Answer 1

проблема display: inline; - в исходном коде у вас есть разрывы строк между вашими ликами, которые представляются как пространство на сайте (как alwys, когда вы используете встроенные элементы и/или текст, см. пример ниже).

, чтобы избежать этого, используйте float: left; или определите свою ul/li в одной строке, без пробелов/разрывов между ними.

* Пример:

это исходный код:

this 
is 
text 

дает этот вывод:

это текст

(разрывы строк/пробелы преобразуются в 1 пространство между слова (а слова li - «слова» в вашем случае))

Answer 2

Вы устанавливаете padding-bottom: 8px на hover, у вас уже есть padding: 5px 10px 8px 10px; применяется к элементу. Нужно ли вам настраивать padding-right на hover, так как вы все еще будете применять к нему 10px?

Answer 3

ul#menubar li { 
display: inline; 
float: left; 
} 

Answer 4

Я думаю, что это может быть стиль браузера по умолчанию, чтобы применить маржу слева/справа от li. Попробуйте установить поля на 0.