如何修正我的文字使其显示在一行上？

Question

我希望我的文字说“像我们在Facebook上一样有机会赢得大奖”。 我希望将“ Facebook”一词链接起来但不加下划线。 我也希望文本和链接在一行上。 这是现在的输出结果

这是我的代码。

function popupWin() {
text =  "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "<h4>Like us on </h4>" + "<a href='myLink' target='_blank'><h4>Facebook</h4></a>" + " <h4>and win a prize</h4>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 1000); 
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=200');
newWindow.document.write(text);
}

Answer 1

function popupWin() {
text =  "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "<h4>Like us on " + "<a href='myLink' target='_blank' style='text-decoration: none;'>Facebook</a>" + " and win a prize</h4>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 1000); 
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=200');
newWindow.document.write(text);
}

popupWin();

一个<h4>标记足以构成整个文本h4。 您不需要将其相乘。

负责CSS text-decoration: none是不强调Facebook链接text-decoration: none内联html属性style 。

Answer 2

function popupWin() {
      text =  "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
      text += "<center>\n<br>";
      text += "<h4 style="display:inline">Like us on </h4>" + "<a href='myLink' target='_blank' style="text-decoration:none; display:inline">    <h4 style="display:inline">Facebook</h4></a>" + " <h4 style="display:inline"> and win a prize</h4>";
      text += "</center>\n</body>\n</html>\n";
      setTimeout('windowProp(text)', 1000); 
}

应该管用！

display:inline使元素排成一行

text-decoration:none删除所有多余的东西，例如下划线。

Answer 3

使用CSS文件更好地设置样式。 对于您的情况，为了删除下划线，可以为Facebook div设置一个id，并将text-decoration的样式设置为none。 另外，要使其显示在一行中，可以使用float：left或display：inline。 您可以使用float：left，因为它将把block元素转换为inline元素。 像下面

JS：

function popupWin() {
text =  "<html>\n<head>\n<title>Pop Window</title>\n<body>\n";
text += "<center>\n<br>";
text += "<h4>Like us on</h4>" + "<h4><a href='myLink' target='_blank' id="facebook" Facebook</a></4>" + "<h4>and win a prize</h4>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 1000); 
}
function windowProp(text) {
newWindow = window.open('','newWin','width=300,height=200');
newWindow.document.write(text);
}

CSS：

#facebook {
   text-decoration: none;
}
h4 {
   float:left // or display:inline
}

P / S：或者您可以删除所有不必要的h4标签，因为每个h4都是一个块元素，所以它会像制作新的h4标签一样自动创建新标签。 因此，如果您仅使用一个h4标签，则不会添加新行。 就像上面的答案。