Jump to content

Why Removing Float:left Affects Dimensions Of A Li Element?


Alexancho

Recommended Posts

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...