All geek questions in one place

The background color <a href> does not display correctly inside the list

I'm just trying to create tab buttons by putting some hyperlinks inside the list into an unordered list. After that, I want to change the color of the tab when the mouse hangs over it. In my code below, I managed to change the color to green, but it does not cover the tab, instead there is some space to the right and left of the <a> link enter image description here

 <!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>
0
source share
3 answers

See this script: http://jsfiddle.net/easwee/z5DG6/3/

Your a must be a block element so that it occupies the entire width of your li . Also removed addition from li and added to the only one. You can play with js violin.

+1
source

Except float:left;padding:0;margin:0 , put all styles in tag A, not LI tag . Use diplay:block in tag A to enable margin and padding.

See my tutorial: I like lists

+2
source

Since you are installing the add-on for li , the remaining red space is the gap between the borders of li and the inner a . For the case, you can set hover to li :

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

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

+2
source

Source: https://habr.com/ru/post/1347558/

More articles:


All Articles