Question

打印ul中的虚线时出现不便之处，该行未出现在Print文件中，但如果在ul外添加div.linha，则工作正常。

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

<ul>

Clientes Vendidos（1）

Nome do cliente： 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文件并在本地Web服务器中运行并尝试打印页面。即使在打印预览中，您也会注意到虚线轮廓。

希望这会有所帮助

更新::: new fiddle as well

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

1 个答案: