CSS：在標題以外的整個文章上放置邊框

我需要在文章左側放置邊框（或裝飾線，無所謂），不包括標題。這是一個有點難以解釋，但更容易得出：CSS：在標題以外的整個文章上放置邊框

H2 Title 
| paragraph : Iorem impsum 
| Dolor sit amet, 
| etc, etc.

的H2標題的文章，而文章的內容縮進（1個縮進）。我發現唯一的辦法是這樣的可怕的事情（我基本上把標題越過邊境以白色背景來覆蓋它）：

article 
{ 
    position: relative; 
    left: 25px; 
    border-left: 1px dotted grey; 
} 

article h2 
{ 
    position: relative; 
    background-color: white; 
    padding-bottom: 10px; 
    left:-25px; 
}

其中一期工程，但我不太喜歡使用相對定位進行如此小的改變。那麼，有沒有一種更方便的方法呢，把標題從文章中移出來呢？

來源

2014-09-29 anto418

有很多方法可以做到這一點，大的答案是正確的（雖然你應該總是嘗試使用類代替標識）。讓我感到震驚的是你「我不太喜歡用相對定位來做這麼小的改變」。你使用你需要使用的東西，雖然你完全不需要它，但它是其中一種方法（例如：article> relative article h2> absolute），在你的情況下它是過度的，但是看到你沒有非常瞭解CSS定位，可以讓你通過現場實例瞭解它 – Devin 2014-09-29 17:09:09

所以，你想縮進和邊界一些文本 - 這樣的東西？

#bordered{ 
 
    border-left: 1px dotted grey; 
 
    margin-left: 1em 
 
}

<h1>title</h1> 
 
<p id="bordered">bordered</p>

來源

2014-09-29 16:40:41 Tai

-1

正如需要兩人配合的div和樣式分開。

來源

2014-09-29 16:44:36 TBL

-1

您可以在H2之後的文章中添加包裝樣式嗎？

HTML：

<article> 
    <h2>Iorem impsum</h2> 

    <div class="wrap"> 
     <p>Dolor sit amet, etc, etc.</p> 
    </div> 
</article>

CSS：

article { 
    position: relative; 
} 
article h2 { 
    position: relative; 
    background-color: white; 
    padding-bottom: 10px; 
    display: block; 
    margin: 0; 
} 
article .wrap { 
    border: 1px dotted grey; 
    margin-left: 25px; 
}

http://jsfiddle.net/jazztorbs/t13sna84/

來源

2014-09-29 16:48:05 Jazz

CSS：在標題以外的整個文章上放置邊框

回答

相關問題