CSS 和飞碟标头

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;

上面的 ids 和 classes 的标签看起来像这样：

      <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-left、@top-center 和@top-right 边距固定为固定宽度，以便标题可以换行而不会导致整个标题根据标题滑动更小/更大？顺便说一句：我试过 whitespace: nowrap;在@top-left 边距上，但这只会导致整个标题从页面的右侧滑出，标题很长。

我希望这有助于解决问题。提前致谢！！

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>