цвет фона неправильно отображается внутри списка

#html #css

#HTML #css

Вопрос:

Я просто пытаюсь создать кнопки вкладок, поместив некоторые гиперссылки внутри списка в неупорядоченный список. После этого я хочу изменить цвет вкладки при наведении на нее курсора мыши. В приведенном ниже коде я смог изменить цвет на зеленый, но он не закрывает вкладку, вместо этого в правой и левой части ссылки имеется некоторое пространство <a> введите описание изображения здесь

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
   #header ul {
        list-style: none;

        margin: 0; 
    }

        #header li {
        float: left;
        padding:10px;
        padding-left:12px;
        border: 1px solid #bbb;
        background:red;
        margin: 0;

    }

    #content {
    clear:both;
    }

    #header a {
        text-decoration: none;
        padding: 10px;
        text-align: center;
        color:#000000;

        }

        #header a:hover {
        background:#00FF00;

    }

    #header{
    position:relative;
    top:20px;
    }
   #content{
   position:relative;
    top:60px;
   }

</style>
</head>
<body>
<div id="header">

<h1></h1>

<ul>
    <li><a href="#">This</a></li>
    <li id="selected"><a href="#">That</a></li>
    <li><a href="#">The Other</a></li>
    <li><a href="#">Banana</a></li>

</ul>

</div>


<div id="content">
    <p>CONTENT HERE .....</p>
</div>
</body>
</html>

Ответ №1:

Кроме float:left;padding:0;margin:0 , поместите все стили в тег A, не в тег LI. Используйте diplay:block в теге A, чтобы включить поля и отступы.

Смотрите мой урок: Я люблю списки

Ответ №2:

Поскольку вы задали отступ для li , оставшийся красный пробел — это пробел между li границами и внутренним a . В вашем случае вы можете установить hover вкл li :

 ...

#header li:hover {
    background:#00FF00;
}

~~#header a:hover { background:#00FF00; }~~

1. Вау .. я думаю, что наведение курсора может быть применено только к элементу <a> . Спасибо за это. Это решило мою проблему.

2. @Sukumar Ramadugu — : наведение будет работать со всеми элементами, за исключением IE6, где оно будет работать только на.

Ответ №3:

Посмотрите на эту скрипку: http://jsfiddle.net/easwee/z5DG6/3 /

Ваш a элемент должен быть блочным, чтобы он занимал всю ширину вашего li . Также удалено заполнение из li и добавлено только для a. Вы можете поиграть с js fiddle.