使用計數器垂直對齊嵌套列表中列表項中的塊級元素？

Question

我有一個帶有計數器的嵌套列表：

1   Foo
1.1 Foo Foo
2   Bar
2.1 Bar Bar

現在我的子項中有多行文本，但不希望它們像往常一樣在櫃台周圍流動。

1.1 Lorem
Ipsum

相反，我希望整個文本水平對齊。

1.1 Lorem
    Ipsum

所以我的下一個想法是在列表項中包含一個段落（或任何類型的塊級元素），以便文本整齊地對齊。

1.1
Lorem
Ipsum

但這引入了另一個問題，因為文本不再從計數器的行開始。

所以我的天才想法是給 p-tag 一些相對的重新定位，以便它出現在我想要的位置。

 /* Counter */ ol { list-style: none; counter-reset: list-item-number; } li { counter-increment: list-item-number; } li::before { content: counters(list-item-number, ".") " "; } /* Align the P */ ol li ol li p { position: relative; top: -2em; /* THIS NEVER PROPERLY ALIGNS: */ left; 2em; }

 <ol> <li> Lorem Ipsum <ol> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> <p> Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea. </p> </li> </ol> </li> </ol>

但是，如果您嘗試這樣做，您會注意到頂部永遠不會與文本正確垂直對齊。 即使我試圖做到像素完美，我也總是偏離一兩個像素。 這是為什么？ 有沒有人有任何想法可以幫助我？ 或者也許我的整個方法完全愚蠢 - 在這種情況下，請告訴我。 :)

另外 - 我只能使用 CSS2，因為這將進入 3rd-party PDF 渲染器（具體來說是 Salesforce），該渲染器在過去 12 年中一直在更新。

Answer 1

您可以使用position: absolute in ::before

 /* Counter */ ol { list-style: none; counter-reset: list-item-number; } li { counter-increment: list-item-number; position: relative } li::before { content: counters(list-item-number, ".") " "; position: absolute; left: -2em; top: 0; /* to keep the same distance from counter to text */ text-align: right; /*whatever you prefer here */ width: 20px; }

 <ol> <li> Lorem Ipsum <ol> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> <p> Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea. </p> </li> </ol> </li> </ol>

Answer 2

您可以考慮 CSS 網格和兩列布局：

 /* Counter */ ol { list-style: none; counter-reset: list-item-number; } li { counter-increment: list-item-number; display:grid; grid-template-columns:auto 1fr; grid-column-gap:5px } li::before { content: counters(list-item-number, ".") " "; /*grid-column:1 no need to specify it since it's by default */ } li * { grid-column:2; /* everything on the second column */ } p { margin-top:0; }

 <ol> <li> Lorem Ipsum <ol> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> <p> Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea. </p> </li> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> </li> </ol> </li> <li> Lorem Ipsum <ol> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> <p> Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea. </p> </li> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> </li> </ol> </li> </ol>

或表格布局：

 /* Counter */ ol { list-style: none; counter-reset: list-item-number; } li { counter-increment: list-item-number; display:table-row; } li::before { content: counters(list-item-number, ".") " "; display:table-cell; white-space:nowrap; padding-right:5px; } p { margin-top:0; }

 <ol> <li> Lorem Ipsum <ol> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> <p> Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea. </p> </li> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> </li> </ol> </li> <li> Lorem Ipsum <ol> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> <p> Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea. </p> </li> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> </li> </ol> </li> </ol>

如果您更改計數器，內容將自動調整：

 /* Counter */ ol { list-style: none; counter-reset: list-item-number 100; } li { counter-increment: list-item-number; display:table-row; } li::before { content: counters(list-item-number, ".") " __ "; display:table-cell; white-space:nowrap; padding-right:5px; } p { margin-top:0; }

 <ol> <li> Lorem Ipsum <ol> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> <p> Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea. </p> </li> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> </li> </ol> </li> <li> Lorem Ipsum <ol> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> <p> Augue ut lectus arcu bibendum at varius vel pharetra. Convallis tellus id interdum velit laoreet id donec. Auctor augue mauris augue neque gravida in fermentum. Volutpat diam ut venenatis tellus in. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. In ornare quam viverra orci. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Aliquam ut porttitor leo a. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Volutpat diam ut venenatis tellus in metus vulputate. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Dictum varius duis at consectetur lorem. Erat velit scelerisque in dictum non. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Elit duis tristique sollicitudin nibh. Suspendisse ultrices gravida dictum fusce ut placerat. Quis blandit turpis cursus in hac habitasse platea. </p> </li> <li> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at augue. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. At volutpat diam ut venenatis tellus in metus vulputate. Nunc non blandit massa enim nec. Odio pellentesque diam volutpat commodo sed egestas. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Ante in nibh mauris cursus mattis. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Convallis posuere morbi leo urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Interdum posuere lorem ipsum dolor sit amet. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Porttitor lacus luctus accumsan tortor posuere. Facilisis leo vel fringilla est ullamcorper eget. </p> </li> </ol> </li> </ol>