The method is to display the li element as inline,so that the list will be horizontal.Set the background color of a:hover differntely to make the change.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>This is a damn test</title> <style type="text/css"> li { display: inline; } a { float:left; width:8em; background-color:navy; text-align:center; margin:0 2px 0 2px; color:white; } a:hover { background-color:green; } </style> </head> <body> <ul> <li><a href="http://danmarner.blogspot.com">one</a></li> <li><a href="http://www.xfocus.net">two</a></li> <li><a href="http://www.justlinux.com">three</a></li> </ul> </body> </html>
Tuesday, December 11, 2007
The way to implement buttons with CSS and list in HTML
Here is a way to display list with links looks like buttons in HTML.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment