gpt4 book ai didi

CSS代码根据其长度负缩进第一个单词

转载 作者:行者123 更新时间:2023-11-28 05:13:07 26 4
gpt4 key购买 nike

我有一些代表纸张的 html 代码。在 h3 标签中,我有一个章节的标题。一个章节可以有一个数字。该数字是可选的,它位于“数字”类的跨度内。我希望所有章节标题文本都与页面边缘的距离相同。它被设置为一个填充值 3cm。问题是我希望所有数字都在“填充区域”的标题之前。示例如下所示:

   1.2 Title of chapter       some other text 1.2.1 Some title of subsection       All other lines beside numbers start at the same distance       from the left side of page.

<body>
<div style="padding:3cm">
<h3><span class="number">1.2 </span>Chapter title</h3>
</div>
</body>

不幸的是,我无法更改 html 代码。我的想法是做一些魔术,将数字放在与它相关的章节文本之前,并将跨度与文本的左侧对齐。仅使用 CSS 可能吗?

现在我使用 javascript 代码和文本缩进:-xxx ch;被添加到 h3。问题是,必须为每个 h3 标签计算 xxx。我希望它可以用

最佳答案

是的,它可以通过 CSS 完成,看看这个片段:

h3 {
position: relative;
}
h3 > span.number {
position: absolute;
top: 0px;
left: -3cm;
text-align: right;
width: 3cm;
padding-right: 5px;
box-sizing: border-box;
}
<body>
<div style="padding:3cm">
<h3><span class="number">1.2 </span>Chapter title</h3>
<h3><span class="number">1.2.4.5 </span>Chapter title</h3>
<h3><span class="number">1.3.1.2.4 </span>Chapter title</h3>
<h3><span class="number">1 </span>Chapter title</h3>

</div>
</body>

关于CSS代码根据其长度负缩进第一个单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39445312/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com