0

我有以下代码。Jfiddle 在这里。正如所见，底部边框，类似于<HR>标签的东西延伸了页面的整个长度。

我想将边框<h1>和<h2>标签限制为页面的 30%。虽然<h3>标签仍然延伸到整个页面。这可以用css吗？

编辑：有一个后续问题，我将如何更改<h3>标签上的 css，以便在边框下大约有一行与字体大小相同的空白<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

你可以做这样的事情。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-23T19:06:27.300 回答
1

您可以width: 30%用于第一个问题，也可以margin-bottom: 1.2em用于第二个问题。

这是你的小提琴。

于 2013-01-23T19:09:40.863 回答
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 回答