CSS和CSS头
CSS和CSS头
提问于 2013-04-17 08:52:18
我工作的公司已经用了一段时间了。最近，他们将标题格式更改为如下所示的复杂格式：
THE COMPANY NAME
_____________________________________________________________________________
This is the name of the article | Date:04/17/2013
_____________________________________________________________________________遗憾的是，我无法让它看起来像上面那样。THe关闭了，我可以让它看起来像是顶部比底线更短的地方：
THE COMPANY NAME
____________________________________________________________________
This is the name of the article | Date:04/17/2013
_____________________________________________________________________________以下是代码：
@page {
size:letter;
margin-top: 0.8in;
margin-bottom: 0.5in;
padding: 5px;
border-top:#90aac5 solid 1px;
@top-left {content: element(leftHeader);}
@top-center{content: element(centerHeader);}
@top-right {content: element(rightHeader);}
}
#page-thisheader-center {
position:running(centerHeader);
border-bottom:#90aac5 1px solid;
font-size:9px;
height:52px;
color:#7e7f7f;
padding:2px;
}
#page-header-right {
position:running(rightHeader);
border-top:#90aac5 1px solid;
height: 25px;
font-size:9px;
color:#7e7f7f;
white-space:nowrap;
float:right;
padding-top:5px;
}
#page-header-left {
position:running(leftHeader);
border-top:#90aac5 1px solid;
height: 25px;
font-size:9px;
color:#7e7f7f;
float:left;
padding-top:5px;
}
.date {
height: 15px;
border-left: #90aac5 solid 1px;
float:right;
width:75px;上面的ids和类的标记如下所示：
<div id ="page-header-left" align="left">
<div> <xsl:call-template name="get.title"/></div>
</div>
<div id ="page-header-right" align="right">
<div class="date"> <xsl:call-template name="get.date"/></div>
</div>
<div id ="page-thisheader-center">
<div> <xsl:call-template name="get.company.name"/></div>
</div>我想这就是全部了。我希望有人能帮忙。我完全搞不懂如何纠正这条底线。谢谢！！
更新短行是由于标题包装较长。有没有办法将“左上角”、“顶部中央”和“右上边距”固定在一个固定的宽度上，这样标题就可以包装起来，而不会根据标题的不同而使整个页眉滑动得更小或更大？顺便说一句:我试过用空格:top；在@左上角边，但这只会导致整个标题从页面的右边滑出，标题很长。
我希望这有助于解决问题。提前谢谢！！
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-18 06:06:52
我不知道是否可以使用@top-left、@top-center和@top-right来做您想做的事情。当我尝试您的示例代码时，会得到如下内容：
THE COMPANY NAME
____________________________________________________________________
_____ ____
title date获取所需内容的一个解决方案是使用单个@top-center头，其中包含头的三个部分。
@top-中间组件将跨越整个页面的宽度，并且您可以在其中布局您的三个div。
例如：
@page {
size: letter;
margin-top: 0.8in;
margin-bottom: 0.5in;
@top-center {content: element(centerHeader);}
}
#page-thisheader-center {
position: running(centerHeader);
}
#company {
border-bottom: #90aac5 1px solid;
text-align:center;
}
#line2 {
border-bottom: #90aac5 1px solid;
}
#article{
float:left;
}
#date {
border-left: #90aac5 solid 1px;
margin-left: 6in;
}以及：
<div id="page-thisheader-center">
<div id="company">THE COMPANY NAME</div>
<div id="line2">
<div id="article">Name of the article</div>
<div id="date">Date : 04/07/2013</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16055657
复制相关文章
相似问题
腾讯云开发者
