Indent text in ordered list

Question

I want to show my text content like below picture. How to do? I tried this but it doesn't indent from the second line. I also tried to put that content in < table > with 2 rows and 2 column but the problem is I can't margin < table > as I wish. < table > has many margin and padding problems.

enter image description here

Update:

The code indent correctly but the problem is I can't margin the table like I want.

<table>
    <tr>
        <td>(1) </td> 
        <td>zzzzzzzzzzzzzzzzzzz</td>
    </tr>

    <tr>
        <td>(2) </td> 
        <td>zzzzzzzzzzzzzzzzzzz</td>
    </tr>
</table>

score 1 · Answer 1 · edited May 23 '17 at 12:17

1

I think you're looking for this fiddle.

This is using a normal list and a CSS counter to create the list numbers. It will reset with every ol to start from the beginning again.

Source: StackOverflow: How can you customize the numbers in an ordered list?

edited May 23 '17 at 12:17

Community

1
1

answered Sep 28 '12 at 08:05

Deep Frozen

2,053
2
25
42

Mr_Green · Answer 2 · 2012-11-18T14:59:23.500

0

Do you mean something like this ?

<ol>
<li>content heerrrrrrrrrrrrere content heerrrrrrrrrrrrere content heerrrrrrrrrrrrere</li>
<li>content heerrrrrrrrrrrrere content heerrrrrrrrrrrrere content heerrrrrrrrrrrrere</li>
</ol>

ol{padding-left:80px;list-style-type:decimal;}

li{
    width:100px;
    word-wrap:break-word;
}

edited Nov 18 '12 at 14:59

answered Sep 28 '12 at 07:42

Mr_Green

40,727
45
159
271

No, it must be (1), (2), ... That's the problem. – emeraldhieu Sep 28 '12 at 07:51

Rohit Azad Malik · Answer 3 · 2012-09-28T08:03:09.587

0

**[Demo][1]**

HI now used to this counter reset in css3

As like this

Css

body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}

HTML

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

[Demo][2]

Updated Demo

edited Sep 28 '12 at 08:03

answered Sep 28 '12 at 07:42

Rohit Azad Malik

31,410
17
69
97

No, it must be (1), (2), .. and the second, third line indent a tab. – emeraldhieu Sep 28 '12 at 07:55

Giona · Answer 4 · 2012-09-28T14:46:08.997

Demo

CSS

ul {
    counter-reset:myCounter;
    list-style:none;
    padding:0;
    margin:0;
}    
ul li {
    padding-left:30px; /* adjust it to your custom font needings */
    position:relative;
    counter-increment:myCounter;
}
ul li:before {
    content:"("counter(myCounter)") ";
    position:absolute;
    left:5px;
}

HTML

<ul>
<li>Content here<br>and here<br>and here</li>
<li>Some more content here<br>and here<br>and here</li>
</ul>

Indent text in ordered list

4 Answers4

Linked