html - 在 ul 中插入虚线边框以打印 css

Question

在 ul 中打印一条虚线时，我感到不便，该行没有出现在打印文件中，但是如果您在 ul 外部添加 div.linha，则可以正常工作。

链接http://jsfiddle.net/joseferreira/nf6emxb8/

<ul>

客户供应商 (1)

• 客户名:Google

        <li><b>Data Cadastro:26/02/1991</b></li>
        <li>Observações:
            <ul>

                <li>dtets</li>
            </ul>
        <!-- -->
        </li>
    </ul>
<!-- -->
</li>

Answer 1

如果你只想在所有 ul 元素上添加虚线轮廓边框，只需添加

ul {
    border:1px dashed #eceeca;
}

在媒体查询 CSS 中。

像这样，

@media print {
  .linha {
    width: 100%;
    height: 5px;
    display: block;
    background: #f00;
    border: 10px solid #c9cacb;
  }
  ul {
    border: 1px dashed #eceeca;
  }
}

<ul>
  <div class='linha'></div>
  <li><b>Clientes Vendidos (1)</b>

    <ul>
      <li><b>Nome do cliente:</b>Google</li>
      <li><b>Data Cadastro:26/02/1991</b>
      </li>
      <li>Observações:
        <ul>
          <li>dtets</li>
        </ul>
        <!-- -->
      </li>
    </ul>
    <!-- -->
  </li>
</ul>

现在亲眼看看打印媒体的输出，在编辑器中复制整个代码，将其保存为 html 文件，然后在本地网络服务器中运行并尝试打印页面。即使在打印预览中，您也会注意到虚线轮廓。

希望对你有帮助

更新:::new fiddle as well