0

次のコードがあります。Jfiddle はこちらです。ご覧のように、タグに似た下の境界線<HR>がページ全体に広がっています。

<h1>と<h2>タグの境界線をページの 30% だけに制限したいと思います。<h3>タグはページ全体に広がったままです。これはcssで可能ですか？

EDIT：フォローアップの質問で、<h3>タグのcssを変更して、境界線の下にフォントと同じサイズの空白が約1行になるようにするにはどうすればよい<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;
}
4

3 に答える 3

1

width: 30%最初の質問にも、2 番目の質問にも使用できmargin-bottom: 1.2emます。

これがあなたのフィドルです。

于 2013-01-23T19:09:40.863 に答える
1

このようなことができます。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%;
}

2番目の質問と同様に、h3の行の高さと同じように、h3に余白を追加します。

于 2013-01-23T19:06:27.300 に答える
0

あなたがh3メインタイトルとh2サブタイトルを持っているのは非常に奇妙です（それは「あるべき」方法とは逆です）。このフィドルは、疑似要素を使用して境界線を取得します。

#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-23T19:14:58.877 に答える