CSS, HTML List indentation

Question

I'm very new to HTML and I'm having a lot of trouble properly formatting my list to my liking. In my current code, I have a numbered list. My objective is to create an indentation or space between the number itself and the text that follows. For example:

1.(indent) For all date/fields/etc etc

2.(indent) A "full-text query"

3.(indent) narrow your searches etc

I've tried searching for tips on w3schools and other StackOverflow posts but can't seem to find a solution. I believe it is due to having a list instead of regular text such as a paragraph. Any help would be appreciated.

Answer 1

Since the text of each item in your example is contained in a span , you can style each span.

For example I have added a padding-left: 30px in the first item of your code: https://jsfiddle.net/02xbseuo/

This will intent the first line of the text. If you want to intent the whole paragraph, you can convert the span elements to div .

Answer 2

Use the text-indent rule like so (see also my slightly altered JSFiddle :

<style type="text/css">
  li {
    padding-right: 5px;
  }
</style>

The style tag belongs in the head section (I put mine on line 20 of the fiddle I linked).

I'd recommend adding a class to your li elements so that you can change only the specific elements you want, rather than all li elements on the page.

Also, you didn't ask about this, but in general I'd recommend avoiding inline styles. Once your pages get larger, they're very hard to maintain and modifying each inline style will take much longer and can lead to additional errors.

Answer 3

With margin and padding you can have the indentation that you need. I used 10px but you can put any value that needed for your solution.

Html code

<ol> <li>element 1 </li> <li>element 2</li> <li>element 3 </li> <li>element 4</li> </ol>

Css code

ol li {margin-left: 10px; padding-left: 10px;}

You can see this sample in JSFiddle