對齊內容右MvcRazorToPdf庫

我有以下view產生使用MvcRazorToPdf庫對齊內容右MvcRazorToPdf庫

<table border="0"> 
    <tr> 
     <td> 
      <h1>Company Name </h1> 
     </td> 
     <td> 
      <div style="text-align:right;margin-right:0px;"> 
       Invoice 
      </div> 
     </td> 
    </tr> 
</table> 
<hr/> 
<div> 
    @Model.InvoiceNum 
</div>

上面的代碼生成低於view在pdf

PDF發票但是有多少曾經我將div設置爲td內invoice，我無法將Invoice文本移動到pdf的右側。我嘗試添加鏈接到bootstrap.css哪個也不起作用。任何人都有這方面的解決方案？有沒有人曾與MvcRazorToPdf樣式pdf librabry？

來源

2016-07-06 Guruprasad Rao

給這個'td'元件的寬度（或表'寬度：100％;'） –

@StephenMuecke來吧，男人..簡單的答案..：/謝謝你這麼多兄弟.. :)請將它添加爲答案，我會接受它.. :) –

是否有任何理由您使用'

'爲非表格數據？（或做浮動，絕對定位等不適用於'MvcRazorToPdf'） –

回答

您的文本對齊方式受到尊重，只是默認情況下，表格及其單元格將被摺疊以適合內容（通過使用瀏覽器工具檢查元素很容易檢查）。

給您的表（或它的細胞的寬度），例如

<table style="width:100%;">

然而，使用<table>元件是不是好的做法（參照Why not use tables for layout in HTML?和Why Tables Are Bad (For Layout*) Compared to Semantic HTML + CSS）。相反，可以使用浮標或相對/絕對定位，例如

<div style="position:relative;"> 
    <h1>Company Name</h1> 
    <span style="position:absolute;right:0;bottom:0">Invoice</span> 
</div>

或

<div> 
    <h1 style="display:inline-block">Company Name</h1> 
    <div style="float:right;margin-top:40px;">Invoice</div> 
</div>

來源

2016-07-06 11:38:13

謝謝bro，但是** [表格選項]（https://s32.postimg.org/v3uh487t1/Table）之間略有不同。 PNG）**你建議和2以上使用'divs'。 ** [第二選項]（https://s31.postimg.org/gzigsdg7v/Second_Option.png）**與** [第一選項]相比相當好（https://s31.postimg.org/yxkloxj4r/ First_Option.png）**。但是，如果我可以使用Table選項類型設計，那本來會很不錯。:)另外，我們如何將bootstrap CSS與此集成起來？當且僅當你可以在這個幫助.. :) –

不知道你如何得到你所顯示的圖像的佈局。你必須有其他的CSS影響你的元素。請參閱[this fiddle]（https://jsfiddle.net/4agy4v9t/），瞭解我提出的兩種替代方案的示例。您將需要使用瀏覽器工具來檢查每個元素生成的樣式 –

糟糕很抱歉，如果我不清楚..我正在研究'PDF'，基本上，我提到的庫將'razor view'轉換爲'PDF'因此，我無法在瀏覽器上檢查這一點。有一個獨立的視圖，爲'PDF'分開佈局，沒有額外的'CSS'添加.. –

相關問題