在html中动态插入div到margin-top为-1em的h1标签前面

发布于 2024-11-08 20:54:51 字数 1606 浏览 0 评论 0原文

我正在尝试向现有文档插入逻辑页码。在下面的 xhtml 代码片段中，这是 .pagerule-cls div。我发现一个文档，这不能很好地工作，因为页面上第一个元素的影响 CSS 的 margin-top 为 -1em。我的页码插入最终位于原始文档的 h1 文本的中心。我可以做些什么来确保 h1 标题“Introduction”出现在我使用适当的 pagerule-cls css 插入页码之后？

顺便说一句，body元素上的样式也是我插入改变左右边距的。

安迪

<?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
            }
        .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>

原文

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
            }
        .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>

分享到QQ

分享到微博