CODEWITHSUNDEEP
htmlcsshtml-lists
catandmouse
catandmouse

Reputation: 11829

Ordered list formatting with indentation and different list types

I've received a request to do this type of formatting for a Terms and Conditions page but the formatting styles that CSS allows doesn't seem to allow such indentation and combinations of list types.

Is there anyway this type of formatting can be achieved?

enter image description here

Upvotes: 0

Views: 84

Answers (1)

Vương Tuấn Anh
Vương Tuấn Anh

Reputation: 68

okay, here's my answer for you:

<ul>
    <li type="1">Lorem</li>
        <ul>1.1 Lorem Ipsum:
            <ol type="i">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a tortor in quam convallis tristique. Etiam aliquam mauris id justo malesuada aliquet. Nullam id libero nec enim fringilla gravida. Fusce pretium neque est, ut fermentum mauris pretium at. Sed tincidunt, nibh tincidunt efficitur iaculis, risus neque vehicula enim, eget convallis elit libero a justo. Mauris id mollis neque. Integer pharetra id risus condimentum mattis. Donec rutrum ante erat, vitae congue nibh vehicula lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ac vulputate nisi, ut ornare urna. Nunc mattis diam a pellentesque viverra. Duis eu ipsum non nisl ornare congue nec ac lacus. Cras convallis diam nec lacus pharetra, eu tristique diam eleifend. Nam quis vehicula lectus.</li>
                <li>Lorem blablabla</li>
                <ol type="a">
                    <li>Lorem blablabla</li>
                    <li>Lorem blablabla</li>
                </ol>
                <li>Lorem blablabla</li>
            </ol>
        </ul>
    </ul>

UPDATE: you can change the type for the li, ol so they will match which type you want by this: w3schools.com/cssref/pr_list-style-type.asp

Upvotes: 2

Related Questions