...

View Full Version : li width issue



bazz
03-01-2009, 06:30 AM
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



#summary ul {
width:100%;
}

#summary li {
list-style-type:none;
display:inline;
width:400px;
background:#000040;
}



all the css works except the width.

bazz

Majoracle
03-01-2009, 06:52 AM
Don't use inline. Try this instead:


#summary ul {
overflow:auto;
width:100%;
}

#summary li {
list-style-type:none;
float:left;
width:400px;
background:#000040;
}

Excavator
03-01-2009, 07:02 AM
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.


<!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.

bazz
03-01-2009, 07:24 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum