html css 格式的反增量
[英]counter-increment with formatting in html css
问题描述
I am able to set the counter/index value which works fine.
我能够设置工作正常的计数器/索引值。 But unable to format the output as shown below.但无法格式化 output 如下图。
Required Result要求的结果
But the result which i am getting is但我得到的结果是
not to worry about colors which i can handle it.不用担心我可以处理的 colors。
So the issue is if the words are more then as shown in the image in 1st point the word starts to display below the counter/index value.所以问题是，如果单词比第一点的图像中显示的多，则单词开始显示在计数器/索引值下方。
So how to display as shown in the above black image where its properly formatted.那么如何在上面正确格式化的黑色图像中显示。
Below is the html code下面是 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>
Note:笔记：
tags gets generated from server so can't do much about it.标签是从服务器生成的，因此对此无能为力。 Need to use the p tag itself.需要使用 p 标签本身。
3 个解决方案
解决方案1
2 已采纳 2020-05-14 17:54:23
p::before elements should be the position absolute and p should be position relative. p::before元素应该是 position 绝对值， p应该是 position 相对值。 Add some padding-left to p tag and p::before left:0;添加一些 padding-left 到 p 标签和 p::before left:0;
Working example in the below
下面的工作示例
.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
Set this in your css在你的 css 中设置这个
p {
/* your code */
display:flex
}
When you place the display: flex on the element, the elements that are inside it are the same height and aligned side by side当您在元素上放置 display: flex 时，其中的元素高度相同并并排对齐
解决方案3
0 2020-05-14 17:55:32
Increase or decrease the font sizes as per your need根据您的需要增加或减少字体大小
.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.