1

ライブラリviewを使用してPDF請求書を生成する以下があります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

しかし、 fordiv内で上記のスタイルをいくら設定しても、テキストを の右側に移動できません。リンクを追加しようとしましたが、どちらも機能しません。誰にもこれに対する解決策はありますか？librabryを使用したスタイリングに取り組んだ人はいますか?tdinvoiceInvoicepdfbootstrap.csspdfMvcRazorToPdf

4

1 に答える 1

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>
于 2016-07-06T11:38:13.063 に答える