0

我需要为称为寄存器的特定类型的家谱报告创建有序列表。在寄存器中，所有的孩子都用小写罗马数字编号，有后代的也用阿拉伯数字编号，如下所示：

First Generation
1. Joe Smith
   2    i. Joe Smith Jr.
       ii. Fred Smith
   3  iii. Mary Smith
       iv. Jane Smith

Second Generation
2. Joe Smith Jr.
       i. Oscar Smith
   4  ii. Amanda Smith
3. Mary Smith
   5   i. Ann Evans

你可以在这个小提琴上看到我最初的尝试：https ://jsfiddle.net/ericstoltz/gpqf0Ltu/

问题是阿拉伯数字需要代代相传，即在单独的有序列表上。当您查看小提琴时，您可以看到阿拉伯数字的第二代再次从 1 开始，但它应该以 2 开头，因为这是分配给该人作为 1 的孩子的数字，并且 2 的第一个孩子的后代应该是 4 而不是 5。所以当我需要它更加一致时，计数器会以某种部分方式继续到第二个列表。

澄清一下：这不仅仅是顺序编号。每个有后代的人都由一个唯一的数字标识，并且该数字将出现两次：该人作为孩子和该人作为父母。

由于标题需要将世代分开，有时它们之间还有叙述。

我觉得我非常接近，只是忽略了一些东西来让它发挥作用！

更新：已解决。请参阅小提琴，了解我是如何用两个计数器做到这一点的。

4

2 回答 2

0

是的，可以使用<ol>.

您的代码应如下所示。

登记报告

第一代

乔治史密斯。

1900 年 1 月 1 日出生于加利福尼亚州洛杉矶的洛杉矶。1925 年 1 月 1 日，25 岁​​的乔治在加利福尼亚州洛杉矶的洛杉矶与威廉·琼斯和玛格丽特·埃文斯的女儿玛丽·琼斯结婚。1905 年 1 月 1 日出生于加利福尼亚州洛杉矶的洛杉矶。

article {
  counter-reset: parent-counter;
}
.register-section ol {
  margin-left: -25px;
}
.register-section li {
  position: relative;
}
.register-section li ol {
  margin-left: 50px;
  text-indent: 15px;
}
.parent {
  counter-increment: parent-counter;
}
.parent:before {
  content: counter(parent-counter);
  display: block;
  position: absolute;
  margin-left: -75px;
  top: 0;
}
<article>
  <h1>Register report</h1>
  <section class="register-section">
    <h2>First generation</h2>
    <ol>
      <li class="parent">
        <span class="spouse">George Smith.</span>
        <p>Born 1 Jan 1900 in Los Angeles, Los Angeles, California. On 1 Jan 1925, when he was 25 years old, George married Mary Jones, daughter of William Jones and Margaret Evans, in Los Angeles, Los Angeles, California. Born 1 Jan 1905 in Los Angeles,
          Los Angeles, California.</p>

        <p>They had the following children:</p>
        <ol type="i" class="children">
          <li>
            Roger Smith.
            <p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            David Smith.

          </li>
          <li>
            Amanda Smith.
            <p>Born on 1 Sep 1929 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            Jane Smith.
          </li>
        </ol>
      </li>
    </ol>
  </section>
  <section class="register-section">
    <h2>Second generation</h2>
    <ol start=2>
      <li class="parent"><span class="spouse">David Smith</span>
        <p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California. On 1 Jan 1947, when he was 20 years old, David married Margaret Adams, daughter of William Adams and Amelia Winter, in Los Angeles, Los Angeles, California. Born 1 Jan 1930 in Los Angeles,
          Los Angeles, California.</p>
        <p>They had the following children:</p>
        <ol start=4 type="i" class="children">
          <li>
            Edward Smith.
            <p>Born on 1 Mar 1949 in Los Angeles, Los Angeles, California.</p>
          </li>
          <li class="parent">
            Henry Smith.
          </li>
        </ol>
      </li>
    </ol>
  </section>
</article>

于 2016-06-15T05:27:38.373 回答
0

使用 CSS 计数器的解决方案。使用下面的代码。

article {
	  padding: 1em;
	  width: 100%;
	  max-width: 700px;
	  margin: 0 auto;
	  
	  counter-reset: section;
	}

	section{
	  counter-increment: section;
	}

	section h4:before {
	  content: counter(section) '. ';
	}

	ol{
		counter-reset: count;
	}
	
	li:before {
  		content: counter(count)".";
 	 	counter-increment: count;
	}

	li:not(.count) {
  	padding-left: 13px;
	}

	li:not(.count):before {
 	 display: none;
	}
<article>

  		<h1>Register report</h1>

  			<section>

    	<h2>First generation</h2>
    	<ol>
      		<li type="none">
	        	<h4>George Smith.</h4>
	        	<p>Born 1 Jan 1900 in Los Angeles, Los Angeles, California. On 1 Jan 1925, when he was 25 years old, George married Mary Jones, daughter of William Jones and Margaret Evans, in Los Angeles, Los Angeles, California. Born 1 Jan 1905 in Los Angeles, Los Angeles, California.</p>

	        	<p>They had the following children:</p>

	        	<ol type="i" class="children">

	          		<li class="count">Roger Smith.
	            		<p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California.</p>
	          		</li>
	          		<li>David Smith.</li>
	          		<li class="count">Amanda Smith.
	           			<p>Born on 1 Sep 1929 in Los Angeles, Los Angeles, California.</p>
	          		</li>
	          		<li>Jane Smith.</li>
	        	</ol>

      		</li>
    	</ol>
  </section>

  <section>

    	<h2>Second generation</h2>
    		<ol> 
      			<li type="none">
      				<h4>David Smith</h4>
        		<p>Born on 1 Nov 1927 in Los Angeles, Los Angeles, California. On 1 Jan 1947, when he was 20 years old, David married Margaret Adams, daughter of William Adams and Amelia Winter, in Los Angeles, Los Angeles, California. Born 1 Jan 1930 in Los Angeles, Los Angeles, California.</p>

        		<p>They had the following children:</p>
		        	<ol type="i">
        		  		<li>Edward Smith.
            			<p>Born on 1 Mar 1949 in Los Angeles, Los Angeles, California.</p>
          				</li>
          				<li class="count">Henry Smith.</li>
        			</ol>
      			</li>
    		</ol>
  </section>
</article>

于 2016-06-15T09:58:59.330 回答