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/

問題は、アラビア数字が世代から世代へと連続している必要があることです。フィドルを見ると、アラビア数字の場合、2 番目の世代が 1 から始まることがわかりますが、2 で始まる必要があります。これは、1 の子供としてその人に割り当てられた番号であり、子孫を持つ 2 の子供の最初の番号であるためです。 5 ではなく 4 です。そのため、より一貫性を持たせる必要がある場合、カウンターは部分的な方法で 2 番目のリストに進みます。

明確にするために、これは連番だけではありません。子孫を持つ各人は固有の番号で識別され、その番号は 2 回表示されます: その人を子として、その人を親として。

見出しのために世代を分ける必要があり、時にはそれらの間に物語があります.

私は非常に近いと感じており、これを機能させるために何かを見落としているだけです!

更新: 解決済み。2 つのカウンターでこれを行う方法については、フィドルを参照してください。

4

2 に答える 2

0

CSS-Counter を使用したソリューション。以下のコードを使用します。

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 に答える
0

はい、 内の start 属性を使用して実行できます<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 に答える