css - 内联元素在新行上打印

Question

我有以下代码:

<div class="outsideDiv">
    <div class="element1">Name: </div>
    <div class="element2">Something</div>
    <div class="element3"> - </div>
    <div class="element4">This something is great</div>
</div>

外部 div 是 display:block，所有内部 div 都是 display:inline。在浏览器中，它们都显示在同一行，如下所示:

Name: Something - This something is great

当我打印它时，4 个 div 显示在单独的行上，如下所示:

Name: 
Something
-
This something is great

我很难弄清楚如何让 4 个内部 div 在同一行上打印。

Answer 1

<div class="outsideDiv">
    <div class="element1" style="display:inline">Name: </div>
    <div class="element2" style="display:inline">Something</div>
    <div class="element3" style="display:inline"> - </div>
    <div class="element4" style="display:inline">This something is great</div>
</div>

或

将此写入您的 print.css:

.element1,.element2, .element3, .element4 {display: inline;}