#html #css
#HTML #css — код
Вопрос:
У меня есть вложенный список со счетчиками:
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-тегу некоторое относительное изменение положения, чтобы он появлялся там, где я хочу.
/* 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, поскольку это происходит в стороннем средстве визуализации PDF (точнее, в Salesforce), которое действительно обновлялось в течение последних 12 лет.
Ответ №1:
Вы можете рассмотреть 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> Комментарии:
1. Хотя это отлично работает, мне нужно что-то, что работает в моем рендере старой школы. Итак, нет CSS3. Извините — я должен был упомянуть об этом.
2. @Semmel проверьте обновление, вы не найдете более старого макета таблицы (стоит отметить, что оба решения работают с любым контентом, даже с большой нумерацией)
3. Мне нравится решение с компоновкой таблицы, поскольку оно кажется наиболее простым. Я протестирую его и посмотрю, как это работает после рендеринга.
4. @Semmel Я также советую вам пересмотреть свой PDF-рендеринг. 12-летний ребенок — не очень хорошая идея. У вас будет много головной боли 😉
5. Таким образом, макет таблицы кажется единственным решением, которое работает стабильно и не вызывает других странных ошибок в 1 пиксель. Он также самый простой для понимания и очень совместимый, так что я остановлюсь на этом.
Ответ №2:
Вы можете использовать position: absolute в ::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> Комментарии:
1. Кажется, это помогает, но я не понимаю, почему или, скорее, как это работает. Мне нужно провести еще несколько тестов.
2. По какой-то причине это работает только в HTML, но имеет другую ошибку размером в 1 пиксель в средстве визуализации PDF Salesforce. Более конкретно, он выровнен со счетчиком внизу, но, похоже, смещен на 1 пиксель сверху (он отсутствует). Это также может быть вызвано мной или моим CSS, но трудно сказать наверняка, поскольку у средства визуализации PDF есть много проблем, которые мне нужно обойти.