bulleted list with different indentation

Question

Can I make bulleted lists on my site that use <ul> and <li> tags have a different indentation distances?

List elements without the <ul> tags are

not indented

I would like to indent some elements, but the default distance is too much and the sans-indent is too little.

The "sans-indent" you speak of isn't even valid HTML anyway (and neither is text directly within a `
` tag). — BoltClock, Dec 28 '10 at 21:02
Have you tried playing with the padding/margin properties in the style tag? `
` — Brad Christie, Dec 28 '10 at 21:07
@BoltClock: yup. validator.w3 wanted to stab me; I was surprised it worked at all (saw it on some random website whilst naively googling my own question first) — sova, Dec 28 '10 at 21:15

score 28 · Accepted Answer · answered Dec 28 '10 at 21:05

28

<ul style="padding-left:20px">
    <li>Element 1</li>
    <li>Element 2</li>
</ul>

I think the default indentation is 40px, this halves it.

answered Dec 28 '10 at 21:05

thirtydot

I believe the `` is unnecessary. See https://www.w3.org/TR/html401/struct/lists.html – tlyim Jun 15 '20 at 12:51
1

@tlyim: That's right, you can skip it. I generally wouldn't though, it can confuse other people that read your code. Here's a more recent link with more details about what you can omit: https://html.spec.whatwg.org/dev/syntax.html#optional-tags – thirtydot Jun 15 '20 at 15:03

score 4 · Answer 2 · edited Oct 11 '13 at 21:47

4

li {
  margin-left: 10px;
}
ul li{ 
  margin-left: 20px;
}

A slightly cleaner way to adjust both of the indentations. Margin and padding differ, so use whichever suits you best.

edited Oct 11 '13 at 21:47

the Tin Man

answered Dec 28 '10 at 21:18

1

in this case is it preferable to change margin-left instead of padding-left? – sova Dec 28 '10 at 21:22
1

It seems as though changing the margin can only indent it farther, as the padding is really the in-between-elements-level distance – sova Dec 28 '10 at 21:27

2 Answers2