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的代码。它有点脏，因为我添加了背景颜色和文本颜色以尝试隔离元素并查看在打印预览中占用的空间。

@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