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

以上代码在view

中的pdf下方生成

但是我在div td invoice内为Invoice设置了多少样式，我无法将pdf文字移到bootstrap.css的右侧1}}。我已尝试添加pdf的链接，但这些链接也无效。有人有任何解决方案吗？有没有人使用 MvcRazorToPdf librabry来设计-n样式？

Answer 1

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

给你的表（或其单元格宽度），例如

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