html - Can't Understand the value of my width -
can please tell me why width of tag set auto when explicitly set 60px ?
here html (with embedded css) :
<!doctype html> <html> <head> <title>testmenu </title> </head> <style type="text/css"> .container{ padding: 0px 10px; background-color: #eee; } ul li a{ width:60px; text-align: center; color: red; } ul{ border: reddish solid 1px; width: 492px; } ul li{ width: auto; display: inline-block; padding: 5px; margin: auto; } </style> <body> <div class="container"> <ul> <li><a href="#">lundi</a></li> <li><a href="#">mardi</a></li> <li><a href="#">mercredi</a></li> <li><a href="#">jeudi</a></li> <li><a href="#">vendredi</a></li> <li><a href="#">samedi</a></li> <li><a href="#">dimanche</a></li> </ul> </div> </body> </html> my guess due inherited or browser specific can't figure out exactly.
anchor elements default inline elements i.e. occupy much space needed. if want them occupy space based on have specified, them you'd need create them inline-block.
so, you'd have re-define css class as:
.container ul li { color:red; display:inline-block; /*add this*/ text-align: center; width:60px; } you can see illustration of here->http://jsfiddle.net/jxmuy/
hope helps!!!
html css
No comments:
Post a Comment