Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: li width issue

  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    li width issue

    Hi,

    I am putting a ul inside a container with the li displayed inline so it runs left to right and onto a new line automatically. I seem unable to get the li to be any iwdth other than its default.

    what am I missing?

    bazz

    Code:
    #summary ul {
    width:100%;
    }
    
    #summary li {
    list-style-type:none;
    display:inline;
    width:400px;
    background:#000040;
    }
    all the css works except the width.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Don't use inline. Try this instead:

    Code:
    #summary ul {
    overflow:auto;
    width:100%;
    }
    
    #summary li {
    list-style-type:none;
    float:left;
    width:400px;
    background:#000040;
    }

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello bazz,
    display:inline lines the li's up but collapses them to whatever is inside.
    Check out my demonstration.
    • One uses inline-block, which may not be widely supported.
    • One uses padding to put more content inside the inline li so you can use your display:inline;
    • One is floated left.

    Code:
    <!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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    ul#summary {
    	width:100%;
    	margin: 20px 0;
    }
    #summary li {
    	list-style-type:none;
    	display:inline-block;
    	width:200px;
    	background:#000040;
    	border-right: 2px solid #fff;
    }
    		ul#summary2 {
    			width:100%;
    			margin: 20px 0;
    		}
    		#summary2 li {
    			list-style-type:none;
    			display: inline;
    			width:200px;
    			padding: 0 50px;
    			background:#000040;
    			border-right: 2px solid #fff;
    		}
    ul#summary3 {
    	width:100%;
    	margin: 20px 0;
    }
    #summary3 li {
    	list-style-type:none;
    	float: left;
    	width:200px;
    	background:#000040;
    	border-right: 2px solid #fff;
    }
    
    </style>
    </head>
    <body>
        <div id="wrap">
            <ul id="summary">
                <li>link</li>
                <li>link</li>
                <li>link</li>
            </ul>        
                    <ul id="summary2">
                        <li>link</li>
                        <li>link</li>
                        <li>link</li>
                    </ul>
            <ul id="summary3">
                <li>link</li>
                <li>link</li>
                <li>link</li>
            </ul>        
        <!--end wrap--></div>
    </body>
    </html>
    A white border and some top/bottom margin are just for presentation.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Excavator: Thank you very much for writing out that code for me. Not only have I got the solution but, I understand more too

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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