限制底部邊框延長頁面長度

我有以下代碼。 Jfiddle是here。如所見，底部邊界，類似於<HR>標籤的頁面延伸了頁面的整個長度。限制底部邊框延長頁面長度

我想將<h1>和<h2>標籤的邊框限制爲僅爲網頁的30％。雖然<h3>標籤仍然在整個頁面上延伸。這可能與CSS？

編輯：有跟進的問題，我將如何更改CSS的<h3>標記，以便下邊框是白色空間大致一行的字體作爲<h3>的大小相同？

HTML

<HTML> 
    <HEAD> 
     <TITLE>Sample Wiki Page</TITLE> 
     <link rel='stylesheet' type = 'text/css' href = 'default.css' /> 
    </HEAD> 
    <BODY> 
     <DIV id='content'> 
      <h3>Main Title</h3> 
      <h2>Sub Title</h2> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit. 

        Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem. Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo, accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum arcu non egestas. 
       </p> 
      <h2>Code Section</h2> 
      <pre> 
       <xmp> 
<HTML> 
    <HEAD> 
     <TITLE>Sample Wiki Page</TITLE> 
     <link rel='stylesheet' type = 'text/css' href = 'default.css' /> 
    </HEAD> 
    <BODY> 
     <h3>Main Title</h3> 
     <h2>Sub Title</h2> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros odio, venenatis ut 
      suscipit eget, vestibulum id est. Vivamus aliquet lacus sit amet enim tempus in fermentum 
      ipsum ornare. Pellentesque tincidunt orci sed sem luctus tristique. Ut a turpis ac nisi 
      semper luctus. Nulla mattis ornare augue, vel lacinia purus porta eu. Vestibulum pulvinar 
      justo dolor, in ultricies tellus. Nullam semper, ante at feugiat commodo, neque eros 
      pulvinar ante, et porttitor velit orci eu magna. Duis mattis libero vitae magna lacinia 
      tincidunt. Vivamus placerat elit a nisi ultrices elementum. Vestibulum condimentum posuere 
      nulla, id ornare urna mattis id. Quisque ornare risus diam. Nunc malesuada leo sit amet 
      mauris bibendum pharetra. Integer convallis orci id lorem volutpat suscipit. 

      Vestibulum ac magna libero, non condimentum neque. Integer vestibulum, quam at tempus 
      fermentum, mi odio dictum nibh, quis venenatis velit ligula laoreet massa. Fusce lobortis 
      augue eu ante bibendum consequat eget posuere neque. Mauris dui lorem, fringilla et auctor 
      a, eleifend id nisi. Sed nunc tortor, blandit et malesuada quis, posuere pellentesque lorem 
      . Nunc vehicula lectus eget tortor tempus sed pharetra diam luctus. Aenean odio leo, 
      accumsan a vestibulum ut, tincidunt in mi. Curabitur commodo venenatis dolor, ultrices 
      placerat nibh tempor nec. Duis eget odio mi, id imperdiet lectus. Aenean luctus bibendum 
      arcu non egestas. 
     <h2>Code Section</h2> 
     <pre> 
     </pre> 
    </BODY> 
</HTML> 
      </xmp> 
      </pre> 
     </DIV> 
    </BODY> 
</HTML>

CSS

#content pre { 
    padding: 1em; 
    border: 1px dashed #2f6fab; 
    color: black; 
    background-color: #f9f9f9; 
    white-space: pre; 
    margin: 1em 0px; 
    display: block; 
    font-family: monospace,Courier; 
    line-height: 1.1em; 
    width:70%; 
} 

#content h3{ 
    font-size: 188%; 
    line-height: 1.2em; 
    color: black; 
    background: none; 
    font-weight: normal; 
    margin: 0; 
    overflow: hidden; 
    padding-top: .5em; 
    padding-bottom: .17em; 
    border-bottom: 1px solid #aaa; 
} 
#content h1, h2 { 
    color: black; 
    background: none; 
    font-weight: normal; 
    margin: 0; 
    overflow: hidden; 
    padding-top: .5em; 
    padding-bottom: .17em; 
    border-bottom: 1px solid #aaa; 
}

來源

2013-01-23 mhopkins321

第一個問題可以使用width: 30%，第二個問題可以使用margin-bottom: 1.2em。

這是您的fiddle。

來源

2013-01-23 19:09:40 gotohales

你可以做這樣的事情。 http://jsfiddle.net/n5qRS/1/

<h1><span>Hello World</span></h1>

CSS

h1 span { 
    color: black; 
    background: none; 
    font-weight: normal; 
    margin: 0; 
    overflow: hidden; 
    padding-top: .5em; 
    padding-bottom: .17em; 
    border-bottom: 1px solid #aaa; 
    display: block; 
    width: 30%; 
}

作爲第二個問題，添加餘量底部至H3相同，H3的線高度。

來源

2013-01-23 19:06:27

這是完美的，我沒有意識到這將是如此簡單。謝謝！更新了 – mhopkins321

以回答第二個問題 –

這是非常奇怪的，你有你的h3作爲主標題和h2爲字幕（即逆轉如何「應該」）。 This fiddle使用僞元素來獲取邊界。

#content h1:after, h2:after { 
    content: ''; 
    display: block; 
    width: 30%; 
    height: 0; 
    margin: 0 auto; 
    border-bottom: 1px solid #aaa; 
}

的margin-bottom在撥弄添加到h3爲您跟進。

來源

2013-01-23 19:14:58 ScottS

限制底部邊框延長頁面長度

回答

相關問題