Alexancho Posted October 28, 2009 Share Posted October 28, 2009 Why removing float:left affects dimensions of a li element?The cod is simple: <!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> Horizontal menu </title><style type="text/css">*{ margin:0; padding:0; }.menu { list-style-type:none; margin:50px;}.menu li{ display:inline; font-size:18px; line-height:36px;}.menu li a { float:left; margin:0 7px 0 0; text-align:center; width:100px; height:36px; color:#008080; text-decoration:none; background:#ffe8ff; border:1px solid red;}ul.menu li a:hover { color:#c60000; background:#a4ffff;}</style> </head> <body> <ul class="menu"> <li><a href="#">About</a></li> <li><a href="#">Servises</a></li> <li><a href="#">Solutions</a></li> </ul> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2009 Share Posted October 28, 2009 An <li> element is displayed as a block by default. A block element automatically takes the full width of its container.By applying float: left to an <li> element it is forced to the left of all the content that follows it. In order for that content to fit on the right side of the element, the element shrinks until it is the size of the content within it (and any padding and borders there may be).In your code, your <li> elements are set to display: inline. They should already only be as wide as the text within them, and aren't even a box. Your <a> elements have float: left, but that's hardly useful since they're inline elements to begin with. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.