SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to Space out Items in a Horizontal List

    I am following the horizontal list example at http://css.maxdesign.com.au/listamatic/horizontal16.htm and it looks good, but instead I want to space the list items out throughout the whole area. In other words, each of the five list items should take up 20% of the area, and there should be almost no space between each of the items. How do I do this? I tried setting li's width to 18%, but that didn't work.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Did you mean something like this?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul.menu {
    	margin:0 auto;
    	padding:0;
    	list-style:none;
    	overflow:hidden;
    	width:80%;
    	background:red;
    }
    .menu li {
    	text-align:center;
    	width:20%;
    	overflow:hidden;
    	float:left;
    }
    .menu li a{
    	display:block;
    	border-right:1px solid #fff;
    	text-decoration:none;	
    	color:#fff;
    	height:2em;
    	line-height:2em;
    }
    .menu li.last{
    	float:none;
    	width:auto;
    	zoom:1.0;	
    }
    .menu li.last a{border:none}
    .menu li a:hover{background:blue}
    </style>
    </head>
    
    <body>
    <ul class="menu">
    		<li><a href="#"> Menu 1</a></li>
    		<li><a href="#"> Menu 2</a></li>
    		<li><a href="#"> Menu 3</a></li>
    		<li><a href="#"> Menu 4</a></li>
    		<li class="last"><a href="#"> Menu 5</a></li>
    </ul>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •