我在XML中嵌套了levelledPara，我想将其转换为HTML中的非嵌套编号列表。无论它们如何排列(ul, grid, flexbox等)，只要它们并排排列，数字列宽度为21mm即可。我不知道如何在不嵌套HTML的情况下做到这一点，但我假设我需要一个中间步骤，比如将第一次传递保存到一个变量，然后输出变量的内容。
输入:
<dmodule>
<content>
<crew>
<descrCrew>
<levelledPara>
<title>Introduction</title>
<para>Data about the bicycle and its control system is given in this document.
This data will help you operate the bicycle.</para>
</levelledPara>
<levelledPara>
<levelledPara>
<title>Controls</title>
<para>Data about the controls that follow is given in this document:
</para>
<levelledPara>
<title>Level 3</title>
<para>Some text to put here for level 3 levelledpara.</para>
</levelledPara>
</levelledPara>
<levelledPara id="par-0001">
<title>Steering</title>
<para>The handlebars are used to steer the bike. They are at the front of
the bicycle. You hold one of the handlebar grips with each hand and move
the handle bar to change the direction of the bike.</para>
</levelledPara>
<levelledPara id="par-0002">
<title>Shifters</title>
<para>The gears control the ratio of pedal rotation to wheel rotation. You
can change this with the shifters. The shifters are on the handlebar.</para>
<para>A description of the two shifters follows.</para>
</levelledPara>
</levelledPara>
</descrCrew>
</crew>
</content>
</dmodule>
所需输出:
<div>
<div style="display: flex;">
<div style="width:21mm;">1</div>
<div><span class="Sidehead1">Introduction</span><p>Data about the bicycle and its control system is given in this document.
This data will help you operate the bicycle.</p>
</div>
</div>
<div style="display: flex;">
<div style="width:21mm;">2.1</div>
<div><span class="Sidehead2">Controls</span><p>Data about the controls that follow is given in this document.</p>
</div>
</div>
<div style="display: flex;">
<div style="width:21mm;">2.1.1</div>
<div><span class="Sidehead3">Level 3</span><p>Some text to put here for level 3 levelledpara.</p>
</div>
</div>
<div style="display: flex;">
<div style="width:21mm;">2.2</div>
<div><span class="Sidehead2">Steering</span><p>The handlebars are used to steer the bike. They are at the front of
the bicycle. You hold one of the handlebar grips with each hand and move
the handle bar to change the direction of the bike.</p>
</div>
</div>
<div style="display: flex;">
<div style="width:21mm;">2.3</div>
<div><span class="Sidehead2">Shifters</span><p>The gears control the ratio of pedal rotation to wheel rotation. You
can change this with the shifters. The shifters are on the handlebar.</p>
<p>A description of the two shifters follows.</p>
</div>
</div>
</div>
实际输出:
<div style="display: flex;">
<div style="width:21mm;">1</div>
<div><span class="Sidehead1">Introduction</span><p>Data about the bicycle and its control system is given in this document.
This data will help you operate the bicycle.</p>
</div>
</div>
<div style="display: flex;">
<div style="width:21mm;"></div>
<div>
<div style="display: flex;">
<div style="width:21mm;">2.1</div>
<div><span class="Sidehead2">Controls</span><p>Data about the controls that follow is given in this document:
</p>
<div style="display: flex;">
<div style="width:21mm;">2.1.1</div>
<div><span class="Sidehead3">Level 3</span><p>Some text to put here for level 3 levelledpara.</p>
</div>
</div>
</div>
</div>
<div style="display: flex;">
<div style="width:21mm;">2.2</div>
<div><span class="Sidehead2">Steering</span><p>The handlebars are used to steer the bike. They are at the front of
the bicycle. You hold one of the handlebar grips with each hand and move
the handle bar to change the direction of the bike.</p>
</div>
</div>
<div style="display: flex;">
<div style="width:21mm;">2.3</div>
<div><span class="Sidehead2">Shifters</span><p>The gears control the ratio of pedal rotation to wheel rotation. You
can change this with the shifters. The shifters are on the handlebar.</p>
<p>A description of the two shifters follows.</p>
</div>
</div>
</div>
</div>
xslt:
<xsl:template match="levelledPara[title]">
<div style="display: flex;">
<div style="width:21mm;">
<xsl:number count="levelledPara" from="content" level="multiple" format="1.1.1.1.1"/>
</div>
<div>
<xsl:apply-templates/>
</div>
</div>
</xsl:template>
<xsl:template match="levelledPara">
<div style="display: flex;">
<!-- suppress numbering if parent levelledPara doesn't have a title -->
<div style="width:21mm;">
<xsl:if test="not(levelledPara/title)">
<xsl:number count="levelledPara" from="content" level="multiple" format="1.1.1.1.1"/>
</xsl:if>
</div>
<div>
<xsl:apply-templates/>
</div>
</div>
</xsl:template>
我认为
<xsl:template match="descrCrew">
<div>
<xsl:apply-templates select=".//levelledPara[title]"/>
</div>
</xsl:template>
<xsl:template match="levelledPara">
<div style="display: flex;">
<div style="width:21mm;">
<xsl:number count="levelledPara" from="content" level="multiple" format="1.1.1.1.1"/>
</div>
<div>
<xsl:apply-templates select="* except levelledPara"/>
</div>
</div>
</xsl:template>
<xsl:template match="levelledPara/title">
<span class="Sidehead2">
<xsl:apply-templates/>
</span>
</xsl:template>
创建扁平的div结构。
在CSS布局宽度方面的数字，至少与Chrome我得到一个更好的结果使用例如<div style="min-width:21mm;">而不是<div style="width:21mm;">。