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

​

​

但是，无论我在td for invoice中为上述invoice设置了多少样式，我都无法将Invoice文本移到pdf的右侧。我尝试添加到bootstrap.css的链接，这也不起作用。有人能解决这个问题吗？有没有人用pdf的风格设计MvcRazorToPdf librabry？

Answer 1

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

例如，给您的表(或其单元格)一个宽度。

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

但是，使用<table>元素并不是很好的实践(请参阅为什么不在HTML中使用表格进行布局呢？和)与语义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>