html - 限制页面底部边框延伸长度-6ren

html - 限制页面底部边框延伸长度

转载作者：太空宇宙更新时间：2023-11-04 04:45:59

25

4

我有以下代码。 Jfiddle 是 here .如图所示，底部边框类似于 <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;
}

最佳答案

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

这是您的 fiddle .

关于html - 限制页面底部边框延伸长度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14487353/

25

4

0

文章推荐： html - Div 背景不显示

文章推荐： c++ - 如何从另一个线程唤醒没有超时时间的 Select 调用

文章推荐： linux - 自动挂载加密分区

c# - 限制/限制 serviceBus 队列以触发 ServiceBusTrigger 形式的消息
我有一个 ServiceBusQueue(SBQ)，它获取大量消息负载。我有一个具有 accessRights(manage) 的 ServiceBusTrigger(SBT)，它不断轮询来自 SBQ
mysql - 对特定列应用 SQL 限制，而不是对完整结果集应用 SQL 限制
在下面给出的结果集中，有 2 个唯一用户 (id)，并且查询中可能会出现更多此类用户: 这是多连接查询: select id, name, col1Code, col2Code, col2Va
python - 限制/限制 GRequests 中 HTTP 请求的速率
我正在用 Python 2.7.3 编写一个带有 GRequests 的小脚本和 lxml 可以让我从各种网站收集一些收藏卡价格并进行比较。问题是其中一个网站限制了请求的数量，如果我超过它，就会发回
database - 跟进【删除(级联/限制)】和更新(级联/限制)
我想知道何时实际使用删除级联或删除限制以及更新级联或更新限制。我对使用它们或在我的数据库中应用感到很困惑。最佳答案在外键约束上使用级联运算符是一个热门话题。理论上，如果您知道删除父对象也将自动删
SQL where 限制
下面是我的输出，我只想显示那些重复的名字。每个名字都是飞行员，数字是飞行员驾驶的飞机类型。我想显示驾驶不止一架飞机的飞行员的姓名。我正在使用 sql*plus PIL_PILOTNAME
NativeScript 限制
我正在评估不同的移动框架，我认为 nativescript 是一个不错的选择。但我不知道开发过程是否存在限制。例如，我对样式有限制(这并不重要)，但我想知道将来我是否可以有限制并且不能使用某些 nat
GrailsDataBinder 限制？
我正在尝试使用 grails 数据绑定(bind)将一些表单参数映射到我的模型中，但我认为在映射嵌入式集合方面可能存在一些限制。例如，如果我提交一些这样的参数，那么映射工作正常: //this wo
Django模板timesince过滤器-限制
是否可以将 django 自过滤器起的时间限制为 7 天。如果日期超过 7 天，则不应用过滤器最佳答案 timesince 的源代码位于 django/django/utils/timesince.
Paypal 限制
我想在我的网站上嵌入一个 PayPal 捐赠按钮。但问题是我住在伊朗——这个国家受到制裁，人们不使用国际银行账户或主要信用卡。有什么想法吗？请帮忙! 问候沮丧最佳答案您可以在伊朗境内使用为伊朗
MySQL联合+限制
这是我的查询 select PhoneNumber as _data,PhoneType as _type from contact_phonenumbers where ContactID = 3
mongodb $in 限制
这个问题在这里已经有了答案: What is the maximum number of parameters passed to $in query in MongoDB? (4 个答案) 关闭
AndroidManifest 限制
我的一个项目的 AndroidManifest.xml 变得越来越大(> 1000 行)，因为我必须对某些文件类型使用react并且涵盖所有情况变得越来越复杂。我想知道 list 大小是否有任何限制。
MySQL 限制
在使用 Sybase、Infomix、DB2 等其他数据库产品多年后使用 MySQL 5.1 Enterprise 时；我遇到了 MySQL 不会做的事情。例如，它只能为 SELECT 查询生成 EX
mongodb $in 限制
这个问题在这里已经有了答案: What is the maximum number of parameters passed to $in query in MongoDB? (4 个回答) 关闭5年
限制 Apache日志文件大小的方法
通常我们是在{$apache}/conf/httpd.conf中设置Apache的参数，然而我们并没有发现可以设置日志文件大小的配置指令，通过参考http://httpd.apache.org/do
Android SharedPreferences 限制
我正在搜索最大的 Android SharedPreferences 键值对，但找不到任何好的答案。其次，我想问一下，如果我有一个键，它的字符串值限制是多少。多少字符可以放入其中。如果我需要频繁更改值
Soundcloud API 限制。
我目前正在试验 SoundCloud API，并注意到我对/tracks 资源的 GET 请求一次从不返回超过 200 个结果。关于这个的几个问题: 这个限制是故意的吗？有没有办法增加这个限制？如
Firebase TLS 限制
我正在与一家名为 Dwolla 的金融技术公司合作，该公司提供了一个 API，用于将银行信息附加到用户并收取/发送 ACH 付款。他们需要我将我的 TLS 最低版本升级到 1.2(禁用 TLS 1.
php - 根据重复元素的数量对PHP中的多维关联数组进行排序/限制
我在 PHP 中有一个多维数组，如下所示: $array = Array ( [0] => Array ( [bill] => 1 ) [1] => Array ( [
连接的 SQL 限制
我在获取下一个查询的第一行时遇到了问题: Select mar.Title MarketTitle, ololo.NUMBER, ololo.Title from Markets mar JOIN(

首页

博学

6Ren·AI

商城

html - 限制页面底部边框延伸长度