html css 格式的反增量
[英]counter-increment with formatting in html css
问题描述
我能够设置工作正常的计数器/索引值。 但无法格式化 output 如下图。
要求的结果
但我得到的结果是
不用担心我可以处理的 colors。
所以问题是，如果单词比第一点的图像中显示的多，则单词开始显示在计数器/索引值下方。
那么如何在上面正确格式化的黑色图像中显示。
下面是 html 代码
<html> <head> <style>.list { counter-reset: my-sec-counter; width: 300px; } p { border-bottom: 1px solid gray; margin-bottom: 15px; padding-bottom: 15px; } p::before { counter-increment: my-sec-counter; content: counter(my-sec-counter) ". "; padding-right: 20px; color: red; font-weight: 500; font-size: 24px; } </style> </head> <body> <div class="list"> <p>HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial </p> <p>CSS Tutorial</p> <p>JavaScript Tutorial</p> <p>Bootstrap Tutorial</p> <p>SQL Tutorial</p> <p>PHP Tutorial</p> </div> </body> </html>
笔记：
标签是从服务器生成的，因此对此无能为力。 需要使用 p 标签本身。
3 个解决方案
解决方案1
2 已采纳 2020-05-14 17:54:23
p::before元素应该是 position 绝对值， p应该是 position 相对值。 添加一些 padding-left 到 p 标签和 p::before left:0;
下面的工作示例
.list { counter-reset: my-sec-counter; width: 300px; background: #070707ed; padding: 30px; } p { border-bottom: 1px solid gray; margin-bottom: 15px; padding-bottom: 15px; position: relative; padding-left: 40px; color: white; } p::before { counter-increment: my-sec-counter; content: counter(my-sec-counter) ". "; padding-right: 20px; color: #FFEB3B; font-weight: 500; font-size: 24px; position: absolute; left: 0; top: 0; } <div class="list"> <p>HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial </p> <p>CSS Tutorial Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid asperiores ducimus facilis mollitia nam necessitatibus porro, quaerat quas quibusdam quis repudiandae sit sunt, tempora voluptatum. Atque, perferendis quam. Laboriosam.</p> <p>JavaScript Tutorial</p> <p>Bootstrap Tutorial</p> <p>SQL Tutorial</p> <p>PHP Tutorial</p> </div>
解决方案2
1 2020-05-14 17:57:35
在你的 css 中设置这个
p {
/* your code */
display:flex
}
当您在元素上放置 display: flex 时，其中的元素高度相同并并排对齐
解决方案3
0 2020-05-14 17:55:32
根据您的需要增加或减少字体大小
.list { counter-reset: my-sec-counter; width: 300px; position: relative; padding-left: 30px; counter-reset: counter; background-color: #333; } p { border-bottom: 1px solid gray; margin-bottom: 15px; padding: 5px 0 15px; Color: #fff; position: relative; } p::before { counter-increment: counter 1; content: "" counter(counter); font-size: 20px; color: #FFDB45; position: absolute; left: -20px; top: 0; }
<html> <head> </head> <body> <div class="list"> <p>HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial </p> <p>CSS Tutorial</p> <p>JavaScript Tutorial</p> <p>Bootstrap Tutorial</p> <p>SQL Tutorial</p> <p>PHP Tutorial</p> </div> </body> </html>
CSS中的反增量问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.