设置innerHTML输出的样式

Question

我正在尝试使用innerHTML函数创建一个JavaScript程序，其中用户在两个文本框中输入某人的名字和姓氏，然后JavaScript在单击按钮后按以下格式操作这些名称：

姓氏、名字。

我已成功让名称按该顺序显示“onclick”，但输出如下所示：

迪克

，

菲利普

.

我希望一切都在一条线上，不间断。我已经尝试创建一个会影响 div 的 css 类：然而，这不起作用。

到目前为止我正在使用的 HTML 看起来像这样：

    <div id='displayName2'></div>,<div id='displayName1'></div>.

Answer 1

要使这两个

标记显示且中间没有换行符，请使用 CSS 属性 display: inline; 或者使用 < /code> 标签而不是

，因为 默认情况下内联显示，其中

是块元素。从语义上讲， 可能更合适。但如果您无法更改 HTML，请相应地修改您的 CSS：

<div id='displayName2'></div>,<div id='displayName1'></div>

#displayName2, #displayName1 {
   display: inline;
}

Answer 2

为此，请使用 代替

。

如果您坚持使用

，请使用 display: inline 使

呈现为内联元素。

Answer 3

最好使用 而不是

，它也具有中性语义，并且默认是内联的。

Answer 4

你有两个选择。 div 元素默认为 display: block。使用 span 代替 div，或者使用 display: inline 设置 div 的样式。