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.