Question

我使用Css样式表将我的文本框放在正确的位置，在crome中使用txtbox并且句子看起来很好，一切都在正确的位置，但是当尝试使用ctrl + p打印网站时，每个句子和每个文本框都会移动，我能做什么，看起来一样？：

<!--
#caption_1 {
position:relative;
left:-120px;
top:0px;
width:175px;
height:22px;
font-size:18px;

}
-->

<!--
#txtfeld_1 {
    position:relative;
    left:-100px;
    top:0px;
      width:175px;
    height:22px;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;  
}
-->

此处我的文本框示例：

print '<font size="4" id="caption_1" face="Calibri">Absender Typ / Shipper type:</font></div><input type="text" name="absenderTyp" value="'.$absenderTyp.'" id="txtfeld_1" readonly></div>';

Answer 1

你已经有类似的东西：

<head>
  <link rel="stylesheet" href="assets/css/styles.css">
</head>

和这样的styles.css文件：

#caption_1 {
    position:relative;
    left:-120px;
    top:0px;
    width:175px;
    height:22px;
    font-size:18px;
}
#txtfeld_1 {
    position:relative;
    left:-100px;
    top:0px;
      width:175px;
    height:22px;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;  
}

正下方添加：

@media print {
    #caption_1 {
        position:relative;
        left:-120px;
        top:0px;
        width:175px;
        height:22px;
        font-size:18px;
    }
    #txtfeld_1 {
        position:relative;
        left:-100px;
        top:0px;
          width:175px;
        height:22px;
        font:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
        text-align:center;  
    }
}

应强制浏览器在页面的打印版本上使用相同的样式，为您（或多或少）提供与“屏幕”版本相同的结果。

请记住，页面宽度通常以屏幕百分比表示的某些内容现在将在页面宽度上计算，但是从您发布的css中，您使用的是静态测量值。

Php表在尝试打印时看起来不同？

1 个答案: