CSS @Media Print - 行内元素的水平间距

Question

您好一直在开发 AngularJS POS 系统，该系统需要在销售后打印收据。我显示销售摘要并使用 ng-print 打印包含销售摘要的 div。对于所有其他元素，我通常使用 display:none，然后其余的是 display:block。有些行需要排成一行，所以我将它们设置为内联，但我无法在这些行之间获得间距，甚至无法对齐。

这是销售摘要的图像以及描述、价格和数量的间距。

这里是html：

<div id="sales-summary">
                <div layout="column" class="sales-summary-headers" style="text-align: center" style="margin: 3px">
                    <div class="print-address">{{transaction.store.name}}</div>
                    <div class="print-address">{{transaction.store.address1}}</div>
                    <div class="print-address">{{transaction.store.address2}}</div>
                    <div class="print-address">{{transaction.store.address3}}</div>
                    <div class="print-address">{{transaction.store.contact}}</div>
                    <br/>
                    <div class="print-address">You were served by: {{transaction.employee.firstName}}</div>
                </div>
                <div class="sales-summary-headers">
                    <div style="text-align: center"> Sales Summary</div>    
                </div>
                <md-divider></md-divider>
                <div layout="row" class="print-row">
                    <div class="print-left" flex="65"><p>Desc</p></div>
                    <div class="print-mid" flex="15"><p>Qty</p></div>
                    <div class="print-right" layout-align="center end"><p>Price</p></div>
                </div>
                <md-divider></md-divider>
                <div layout="row" class="print-row" ng-repeat="item in saleItems">
                    <div class="print-left" flex="65">{{item.product.description}} </div>
                    <div class="print-mid" flex="15">{{item.quantity}} </div>
                    <div class="print-right" layout-align="center end">{{item.unitTotalDisplayPrice | currency:"€"}} </div>
                    <br/>
                </div>
                <md-divider></md-divider>
                <md-divider></md-divider>
                <div layout="row" class="print-row">
                    <div flex="80">Subtotal</div>
                    <div layout-align="center end">{{ subTotal | currency:"€" }}</div>
                </div>
                <div layout="row" class="print-row">
                    <div flex="80">Tax</div>
                    <div layout-align="center end">{{ tax | currency:"€" }}</div>
                </div>
                <div layout="row" class="print-row">
                    <div flex="80">Total</div>
                    <div layout-align="center end">{{ total | currency:"€" }}</div>
                </div>
                <md-divider></md-divider>
                <div style="text-align: center" class="sales-summary-headers">
                    <div>Payments</div> 
                </div>
                <md-divider></md-divider>
                <div layout="row" class="print-row" ng-repeat="payment in payments">
                    <div flex="80">{{ payment.type }}</div>
                    <div layout-align="center end">{{ payment.amount | currency:"€" }}</div>
                    <br/>
                </div>
                <md-divider></md-divider>
                <div layout="row" class="print-row">
                    <div flex="80">Change</div>
                    <div layout-align="center end">{{ transaction.changeValue | currency:"€"}}</div>
                </div>
                <div>
                    <div>
                        Some message for the store...
                    </div>
                </div>
                <br/>
                <div class="print-row" style="text-align: center" style="margin: 3px">
                    <h4>Till: {{ transaction.till.name }}</h4>
                </div>
            </div>
            <div layout="row" >
                  <md-button ng-print print-element-id="sales-summary">
               Print
              </md-button>
              <md-button ng-click="email()">
               Email
              </md-button>
              <span flex></span>
              <md-button ng-click="finishTransaction()" >
               Done
              </md-button>
    </div>

它只打印id="sales-summary"内的元素。

我尝试在 CSS 中设置间距，但没有任何效果这是 CSS 的代码。它有点脏，因为我添加了背景颜色和文本颜色以尝试隔离元素并查看 space 在打印预览中占据了什么。

@media print {
body * {
    display:none;
}

md-sidenav * {
    display: none !important;
}

section  * {
    display: none !important;
}

#printSection, #printSection * {
    display: block;
}

#printSection {
    position:absolute;
    left:0;
    right: 0;
    top:0;
}
.print-row *{
    width:100%;
    display: inline !important;
    color: green;
    /*background-color: pink;*/
    margin: 2px;
}

.print-row div *{
    display: inline !important;
}



.print-left{
    text-align: left;
    width:65% !important;
    background-color: blue;
    color: black;
}

.print-mid p{

    width:65% !important;
    background-color: green;
    color: white;
}

.print-row{
    background-color: yellow;
    width:100% !important;
    /*font-size: 0pt;*/
}

.print-left{
    text-align: left;
    width:65% !important;
    /*font-size: 12pt;*/
}

.print-mid{
    width:15% !important;
    text-align: right;
    /*font-size: 12pt;*/
}

.print-right{
    width:20% !important;
    text-align: right !important;
    /*font-size: 12pt;*/
}

这是打印的内容。 desc、Qty Price之间没有间距。

如有任何帮助，我们将不胜感激。

Answer 1

我认为原因是这个选择器的规则：

.print-row *{

它将所有这些元素定义为内联元素，因此它们的 width 设置变得毫无意义。尝试将其设置为 inline-block

CSS @Media Print - 行内元素的水平间距

CSS @Media Print - horizontal spacing of inline elements

css

media

printing

angularjs