Subsequent Instances

**NokX** · Oct 22, 2007 11:36

let's say i have a nest of lists. i want each nested list to be indented 15px more than it's parent. how can i do this in CSS?

i know i can do this...

Code:

ul {
     margin-left: 15px;
}
ul ul {
     margin-left: 15px;
}
ul ul ul {
     margin-left: 30px;
}

but i was hoping for something a bit more dynamic as i don't know how deep the nesting could go.

any ideas?

**redhillccwebmas** · Oct 22, 2007 12:16

The way you have shown in the only way to do it via fixed-dimension margins. Relative-dimensions would work better in your favour, as the margin of the child would be relative to the parent

Hope this helps

James

**DaveWoods** · Oct 22, 2007 14:37

Originally Posted by redhillccwebmas

The way you have shown in the only way to do it via fixed-dimension margins. Relative-dimensions would work better in your favour, as the margin of the child would be relative to the parent

Hope this helps

James

That's not exactly true. Using a fix size, an element will always (presuming it's not absolute positioned) nest based on it's parent so this can be achieved quite simply applying the margin to one <ul> and the rest will indent accordingly

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>List Example</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;	
}
ul {
	margin-left: 15px;	
}
</style>
</head>
<body>
<ul>
	<li>Item one
		<ul>
			<li>Item two
				<ul>
					<li>Item three</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>

User Tag List

Thread: Subsequent Instances

Thread Tools

Display

Subsequent Instances

Bookmarks

Bookmarks

Posting Permissions