Question

我工作的公司已经使用飞碟一段时间了。最近，他们将标题格式更改为如下所示的复杂格式：

                             THE COMPANY NAME
_____________________________________________________________________________
This is the name of the article                          |    Date:04/17/2013
_____________________________________________________________________________

令人遗憾的是，我不能让它看起来像上面那样。关闭我可以让它看起来就像顶线比底线短：

                              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;

对于上面的ID和类，标签看起来像这样：

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

我认为这就是全部。我希望有人能帮帮忙。我完全不知道如何纠正顶线。谢谢！

更新短线是由于更长的标题包装。有没有办法将@左上角，@顶部中心和@右上边距固定为固定宽度，这样标题可以换行而不会导致整个标题根据标题滑动更小/更大？顺便说一句：我试过空白：nowrap;在@左上边距，但这只会导致整个标题从页面右侧滑出长标题。

我希望这有助于解决方案。在此先感谢!!

Answer 1

我不知道是否可以使用@top-left，@top-center和@top-right执行您想要的操作。当我尝试您的示例代码时，我会得到类似的结果：

                               THE COMPANY NAME
____________________________________________________________________

_____                                               ____                    
title                                               date

获得所需内容的一种解决方案是使用单个@top-center标头，其中包含标头的三个部分。

@ top-center组件将跨越页面的整个宽度，您可以布局您的里面有三个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>

CSS和Flying Saucer标题

1 个答案: