使用CSS的標題層次結構中的段落的絕對縮進

我試圖格式化文檔，該文檔包含標題的嵌套層次輪廓，並且段落出現在層次結構中的任何級別。這就是我想實現：使用CSS的標題層次結構中的段落的絕對縮進

這裏的關鍵是，段落需要不論被縮進在它們出現的教主級的相同。到目前爲止，這是HTML和CSS，我有：

<style> 
    .topLevel { 
     position: relative; 
     font-size: 30px; 
    } 
    .sublevel { 
     position: relative; 
     font-size: smaller; 
     left: 30px; 
    } 
    .paragraph { 
     position:relative; 
     left: 30px; 
     font-size: medium; 
     color: red; 
    } 
</style> 

<div class="topLevel"> 
    Heading Level 1 
    <div class="sublevel"> 
     Heading Level 2 
     <div class="paragraph">Paragraph 1</div> 
     <div class="sublevel"> 
      Heading 3 
      <div class="paragraph">Paragraph 2</div> 
     </div> 
    </div> 
</div>

結果是這樣的（無視字體差異）：

任何想法，我怎麼能得到段落的左邊位置所有的都是相同的，同時允許它們垂直出現在它們所屬的整個文檔中？請注意，該文件是動態的;標題和段落可以被添加和移動，並且文檔需要保留輪廓流，正如我已經指出的那樣。例如，像Microsoft Word文檔一樣。感謝您的幫助。

我應該注意，由於業務邏輯，這在我的應用程序中作爲一個樹結構實現，其中的節點可以展開和摺疊。所以使用html h1，h2元素的簡單解決方案似乎不是一個可行的選擇。

來源

2017-04-26 Len White

使用直接子選擇，你應該能夠做到的是，在其中設置水平，你需要的，也許這樣的事情可以給你一個開始

注數>，我改變了你left: 30px到margin-left: 30px，這應該是比較合適的

.topLevel { 
 
    position: relative; 
 
    font-size: 30px; 
 
} 
 
.sublevel { 
 
    position: relative; 
 
    font-size: smaller; 
 
    margin-left: 30px; 
 
} 
 
.paragraph { 
 
    position: relative; 
 
    margin-left: 15px; 
 
    font-size: medium; 
 
    color: red; 
 
} 
 
.sublevel > .paragraph {        /* level 2 */ 
 
    margin-left: -15px; 
 
} 
 
.sublevel > .sublevel > .paragraph {     /* level 3 */ 
 
    margin-left: -45px; 
 
} 
 
.sublevel > .sublevel > .sublevel > .paragraph {  /* level 4 */ 
 
    margin-left: -75px; 
 
}

<div class="topLevel"> 
 
    Heading Level 1 
 
    <div class="paragraph">Paragraph 1</div> 
 
    <div class="sublevel"> 
 
    Heading Level 2 
 
    <div class="paragraph">Paragraph 2</div> 
 
    <div class="sublevel"> 
 
     Heading 3 
 
     <div class="paragraph">Paragraph 3</div> 
 
     <div class="sublevel"> 
 
     Heading 4 
 
     <div class="paragraph">Paragraph 4</div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-26 17:16:58 LGSon

尼斯的答案！ – vals

@vals謝謝:) – LGSon

似乎這樣做！謝謝，我不知道這個孩子選擇器 - 好東西可用。 –

使用CSS的標題層次結構中的段落的絕對縮進

回答

相關問題