inserting div dynamically in html in front of h1 tag that has margin-top of -1em_问答_开发者

inserting div dynamically in html in front of h1 tag that has margin-top of -1em

开发者 https://www.devze.com 2023-03-07 07:19 出处：网络

I have existing documents that I\'m trying to insert logical page numbers into.In the xhtml snippet below, this is the .pagerule-cls div.I found a document that this doesn\'t work well with because th

相关专题：css xhtml

I have existing documents that I'm trying to insert logical page numbers into. In the xhtml snippet below, this is the .pagerule-cls div. I found a document that this doesn't work well with because the affecting css for the first element on the page has a margin-top of -1em. My page number insertion ends up in the center of the h1 text of the orginal document. Is there anything I can do to make sure the h1 heading "Introduction" comes after my page number insertion with appropriate pagerule-cls css?

By the way, the style on the body element is also my insertion to change the left and right margins.

Andy

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <style>
        .calibre14 {
            display: block;
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 0.67em;
            margin-left: 0;
            margin-right: 0;
            margin-top: -1em;
            text-align: center
            }
        .calibre4 {
            display: block;
            margin-bottom: 0;
            margin-left: 1.25em;
            margin-right: 0;
            margin-top: 0;
            text-align: justify
           开发者_如何学Python }
        .pagerule-cls {
            text-align: center;
            font: 13px Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body style='margin-left:100px;margin-right:10px;min-width:400px;max-width:800px;'><a name='stagpage6' id='stagpage6'/><div class='pagerule-cls'>7</div>
<div><blockquote class="calibre4"><span>
<h1 class="calibre14"><span><span class="bold"><a></a>INTRODUCTION</span></span></h1>
<div></div></span></blockquote></div>
</body>
</html>

The simplest way is to add margin-bottom: 1em; to .pagerule-cls, which maybe would result in a too large margin for the other documents. Better is to add this extra style only to the document in question. How do you modify the documents? Could you query for the -1em?