html - What does "overflow" do for this <ul> tag? -
i creating header menu using <ul>
, wanted stretch top of page. first used width:100%
didn't work.then saw similar example somewhere , had used overflow:hidden
when used streched list end.i wanted know overflow
in here , why width:100%
can not similar action?
ul { list-style-type: none; padding: 0; margin: 0; overflow: hidden; background-color: black; } li { background-color: black; color: red; float: left; } li a{ display: inline-block; color: white; text-decoration:none; padding: 20px; text-align: center; } li a:hover{ background-color:red; }
<!doctype html> <html lang="fa"> <head> <link rel="stylesheet" type="text/css" href="menu.css"> </head> <body> <ul> <li><a target="_blank" href="http://www.google.com">google</a></li> <li><a target="_blank" href="http://www.yahoo.com">yahoo!</a></li> <li><a target="_blank" href="http://www.amazon.com">amazon</a></li> </ul> </body> </html>
using overflow
makes element stretch match children when have set float
property - it's 1 of ways implement clearfix
Comments
Post a Comment