Jump to content

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


Alexancho
 Share

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.

Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...