Question

我正在使用DomPDF将给定的String导出为PDF。我正在尝试设置自己的复选框的样式，然后将其对齐到“标签”旁边。遗憾的是，Label位于复选框的后面，我尝试了很多方法对其进行修复，但是我没有找到一个好的解决方案。

我知道SO的一些帖子正在解决这些问题。问题不在于它不能在普通网站上运行，而是在DomPDF上的PDF导出中，该复选框以另一种方式运行。

我阅读并尝试了StackOverflow的许多方法。我还阅读了DomPDF的CSS兼容性，并且支持我所使用的每个元素。

我摆弄着边距和填充。要么什么都没有发生，要么整个部分都被移动了。因此，就像“标签”位于“复选框”后面并随其一起移动一样。

我的Laravel代码

    public function export_to_pdf()
    {
        $upperHTML = '<html><head><link rel="stylesheet" href="'.public_path("examplepdf.css").'"></head><body>';
        $checkboxEL = '<input type="checkbox" name="favorite_pet" value="Cats"><label>Cats</label><br><input type="checkbox" name="favorite_pet" value="Dogs" id="dogs"><label>Dog</label>';
        $underHTML = '</body></html>';
        $htmlNested = $upperHTML . $checkboxEL . $underHTML;

        $options = new Options();
        $options->set(['DOMPDF_ENABLE_CSS_FLOAT' => true]);

        $dompdf = new Dompdf($options);
        $dompdf->setBaseHost(public_path("examplepdf.css"));
        $dompdf->loadHTML($htmlNested);
        $dompdf->render();
        $dompdf->stream("fa");

    }

我的CSS代码

.checkbox-list {
    list-style: none;
}

input[type="checkbox"] {
    display:none;
    -webkit-appearance: none;
}
input[type="checkbox"] + label:before {
     width: 15px;
     height: 15px;
     border-radius: 3px;
     border: 2px solid #636b6f;
     background-color: #fff;
     display: block;
     content: "";
     float: left;
     margin-right: 50px;
 }

我试图以最好的方式表示我的预期结果和实际结果，以便你们知道我的意思。

预期结果：

[]猫

[]狗

实际结果：

[] ts

[] g

如何在DomPDF中的复选框旁边对齐我的标签？

0 个答案: