在 MvcRazorToPdf 库中将内容右对齐

Question

我有以下 view 使用 MvcRazorToPdf 库生成 PDF 发票

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

以上代码在 pdf

中生成以下 view

但是我在 td 中为 invoice 设计了多少上述 div 样式，我无法将 Invoice 文本移动到右侧pdf。我试过将 link 添加到 bootstrap.css 中，但这也不起作用。有人对此有任何解决方案吗？有没有人用 MvcRazorToPdf 库设计 pdf 的样式？

Answer 1

您的文本对齐方式得到尊重，只是默认情况下，您 table 及其单元格将折叠以适合内容（使用浏览器工具检查元素很容易检查）。

给你的table（或其单元格一个宽度），例如

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

但是，使用 <table> 元素不是好的做法（请参阅 Why not use tables for layout in HTML? and Why Tables Are Bad (For Layout*) Compared to Semantic HTML + CSS。）。相反，您可以使用浮动或 relative/absolute 定位，例如

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

在 MvcRazorToPdf 库中将内容右对齐

Align contents to right in MvcRazorToPdf library

pdf

asp.net-mvc

mvcrazortopdf