Простая навигационная панель перекатывает зазор

просто быстрый простой html/css вопрос im уверен, что кто-то сможет легко ответить. Im кодирующий новичок, поэтому почему-то спрашивает :)Простая навигационная панель перекатывает зазор

Таким образом, im делает навигационную панель, выполненную из неупорядоченного списка, завернутого в тег div с переводом, чтобы изменить цвет фона для каждой ссылки. (Я надеюсь, что мои кодирования жаргон имеет смысл) Heres моего кода:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Thomson Automotive Ebay Store</title> 

<style type="text/css"> 
#navbar ul { 
background-color: #000; 
text-align: center; 
padding:10px; 
} 
#navbar ul li { 
display: inline; 
font-family: Arial, Helvetica, sans-serif; 
list-style-type: none; 
} 
#navbar ul li a { 
color: #FFF; 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
text-decoration: none; 
font-weight: bold; 
padding: 10px 10px; 
} 
#navbar ul li a:hover { 
background-color: #0085D7; 
} 
</style> 
</head> 
<body> 

<div id="navbar"> 
    <ul> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">ABOUT US</a></li> 
    <li><a href="#">ADD TO FAVORITES</a></li> 
    <li><a href="#">DELIVERY & RETURNS</a></li> 
    <li><a href="#">FEEDBACK</a></li> 
    <li><a href="#">CONTACT</a></li> 
    </ul> 
</div> 

</body> 
</html>

Так что моя единственная проблема, когда его просмотр в Firefox, когда я двигаюсь по моей ссылке, фон изменение цвета не кажется, заполнить мою навигационную панель как показано здесь: http://i.imgur.com/OvpXdiQ.jpg

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

Спасибо :)

источник

2014-02-21 user3335097

Выглядит хорошо в моем Firefox (v26): http://jsfiddle.net/N7khC/ –

Снимите прокладку из #navbar ul.

Добавить эти свойства #navbar ul li a:

{line-height: 40px; display: inline-block; padding: 0px 10px;}

Line высота будет определять высоту вашего нав, так и по вертикали центрировать текст, как хорошо! Inline-Block дает высоту, поэтому вам не нужны никакие прокладки сверху или снизу, только стороны.

источник

2014-02-21 01:28:46 slynagh

Простая навигационная панель перекатывает зазор

ответ

Смежные вопросы