I have a list. I want to wrap around all items with rectangles of a same size. I figured out how to create rectangles, but I cannot set them to a same size. I have the following code: #idList { margin: 0; padding: 0; list-style-type: none; } #idList li { display: block; margin: 0; padding: 4px; width: 200px; color: #888; font: normal 15px/150% Tahoma, Georgia; } #idList li a { color: #888; border: solid 1px; padding: 4px; text-decoration: none; } Code (markup): Is there any way to set them all to a same size? If so, how can I do that?
The trick here is that you can't really specify a width on an in-line level item, like an anchor. Your width on the LI is fine; I added a dashed border so you could see it. Or, you can make the links block items, and then a width is allowed. Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> #idList { margin: 0; padding: 0; list-style-type: none; } #idList li { margin: 0; padding: 4px; width: 200px; color: #888; font: normal 15px/150% Tahoma, Georgia; border: dashed #666 1px; } #idList li a { color: #888; display: block; border: solid 1px; padding: 4px; text-decoration: none; } </style> </head> <body> <h1>Header</h1> <ul id="idList"> <li><a href="#">ipsum 1994</a></li> <li><a href="#">lorem</a></li> <li><a href="#">delta</a></li> <li><a href="#">fours</a></li> </ul> </body> </html> Code (markup):