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>