Question

我有两个div，一个用于名字，另一个用于姓氏。当我尝试打印它们时工作正常，但问题是名称和姓氏不是彼此相邻。如何让姓名和姓氏彼此相邻？会发生的是，我得到了所有名字的长度，并且在所有名字下的长度行中都得到了所有姓氏。我的代码：

var Name = document.getElementById("divNames").innerHTML;
var LastName = document.getElementById("divLastNames").innerHTML;

 myWindow.document.write(Name + " " + LastName);
myWindow.document.close();
myWindow.focus();
myWindow.print();
myWindow.close();

Answer 1

你需要以某种方式制作display: inline-block;。您可以使用外部CSS文件执行此操作，如下所示：

div {
  display: inline-block;
}

当然这会影响页面上的所有div，因此您可能希望为每个元素添加一个类或ID。

或者您可以直接在元素上设置样式：

Name.style.display = 'inline-block';
LastName.style.display = 'inline-block';

Answer 2

您可以创建一个CSS Media查询，该查询只会在打印时将div更改为彼此相邻：

@media print {
  #divNames{display:inline-block;}
  #divLastNames{display:inline-block;}
}

将div项目放在彼此旁边进行打印

2 个答案: