CSS和飞碟头

Question

我工作的公司一直在使用飞碟。随着研究的深入，他们已经改变了报头格式，以一个复杂的，看起来像这样：

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

Regrettfully，我不能让它看起来像上面。在关闭我可以得到它看起来像就是最上面一行是短于底线：

       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> 

我认为就是这样。我希望有人能帮帮忙。我完全沉迷于如何纠正第一线。谢谢！！

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

我希望这有助于解决方案。提前致谢！！

Answer 1

我不知道是否可以使用@top-left，和@top-right做你想做的。当我尝试示例代码中，我得到的是这样的：

       THE COMPANY NAME 
____________________________________________________________________ 

_____            ____      
title            date 

一个解决方案，以得到你想要的是使用单一头，包含标题的三个部分内容。

@顶部中心组件将跨越页面的整个宽度，并且您可以在其中布置三个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>