CSS3: Make next item indent more

Question

I'm wondering if there's a way to add extra margin-left to each next item, such as

-Item1
  -Item2
    -Item3
      -and so forth

Is this possible with CSS3? I haven't seen anything for 'every next item'.

Silly question: why on earth would you want to do this? Indentation implies that the next element is part of a sub-list, not a sibling. — Blazemonger, May 08 '13 at 19:06
If you saw the design you would understand. I'm just looking for a simple CSS way to do this without IDing each one or using JS. — Casey Dwayne, May 08 '13 at 19:07
You're trying to do something very non-standard, so you'll have to come up with a non-standard solution and indent each element explicitly. Sorry, there's no easy way to implement what you want. — Blazemonger, May 08 '13 at 19:08
That is the way it is to appear, not actually be in the mark up. This question can be used for more than just list items. It's just for visual reasons people.. the image is a star, not a disc or numeral. Large text. Graphic reasons, just don't want messy markup. — Casey Dwayne, May 08 '13 at 19:10
Default ul>li>ul>li>ul>li etc. looks like you want: http://jsfiddle.net/5XpXv/ — WooCaSh, May 08 '13 at 19:18
I second what @kcdwayne says. I want to do precisely the same thing; and saying 'you don't want to do that' really doesn't help me. — David Given, Jan 06 '15 at 22:06

drinchev · Answer 1 · 2013-05-08T19:35:14.780

3

Sure, you can. But it's freaky ...

Demo : http://jsbin.com/exuwej/1/edit

CSS :

ul {
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    display: block;
    width: 500px;
    padding: 0;
    margin-left: 100px;
    margin-top: -50px;
    list-style: none;
    height: 400px;
}

ul li {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    width: 60%;
    border: 1px solid blue;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    text-align: left;
}

HTML :

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

edited May 08 '13 at 19:35

answered May 08 '13 at 19:18

drinchev

19,201
4
67
93

1

-1 for only specifying WebKit prefixes without including unprefixed transforms, much less a notice about other vendor prefixes. Transforms are a standard, and not a WebKit-only thing. – BoltClock May 08 '13 at 19:32
I can't argue with you :) You're one of my favourite http://stackoverflow.com/questions/14718319/why-does-overflow-x-hidden-make-my-absolutely-positioned-element-become-fixed – drinchev May 08 '13 at 19:35
I've removed my downvote. And no worries, I downvoted only because I'm strict when it comes to vendor prefix issues. – BoltClock May 08 '13 at 19:38
You are right about that. Sometimes I'm in a hurry to answer and forget about all those prefixes, but it's never good for novice. – drinchev May 08 '13 at 19:40

score 2 · Answer 2 · answered May 08 '13 at 19:13

2

There's no way to do this indefinitely, without javascript, but you could write a handful of CSS selectors for it. Though I would advise against doing this for reasons already stated by others.

li {
    margin-left: 20px;
}
li+li {
    margin-left: 40px;
}
li+li+li {
    margin-left: 60px;
}
li+li+li+li {
    margin-left: 80px;
}

answered May 08 '13 at 19:13

aaronburrows

994
4
16

Hmm.. I guess that works. More simple than javascript or IDing. Thanks. – Casey Dwayne May 08 '13 at 19:17
I prefer this to the other one, primarily because the other one only works for certain heights/widths and requires quite a bit of angle tweeking to get it outside the sweet-zone posted. – Randolpho Jul 11 '14 at 20:26
Ooh, I like this. It's still evil and horrible, of course, but it's simple and gets the job done nicely. – David Given Jan 06 '15 at 22:08

CSS3: Make next item indent more

2 Answers2