Стилизация вывода innerHTML

Question

Я пытаюсь создать программу JavaScript с использованием функции innerHTML, в которой пользователь вводит имена и фамилии кого-либо в двух текстовых полях, а JavaScript манипулирует именами после нажатия кнопки в следующем формате:

Фамилия, Имя.

Я успешно получил имена, появляющиеся в «onclick» в этом порядке, но вывод выглядит так:

Dick

,

Филипп

.

Я хочу, чтобы все было на одной строке без перерывов. Я уже пытался создать класс CSS, который будет влиять на div: .nobr {white-space: nowrap; } Однако это не сработало.

HTML, с которым я работаю до сих пор, выглядит следующим образом:

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

Answer 1

Чтобы эти два тега <div> отображались без переноса строки, используйте атрибут CSS display: inline; Или используйте теги <span> вместо <div>, поскольку <span> отображается встроенным по умолчанию, где <div> является блочным элементом. Семантически, <span>, вероятно, более уместно, но если вы не можете изменить HTML, измените свой CSS соответствующим образом:

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

#displayName2, #displayName1 {
   display: inline;
}

Answer 2

Лучше использовать <span> вместо <div>, оно также имеет нейтральное семантическое значение и по умолчанию встроено.

Answer 3

Для этой цели используйте <span> с вместо <div> с.

Если вы настаиваете на использовании <div> s, то используйте display: inline, чтобы сделать <div> s рендерингом в качестве встроенных элементов.

Answer 4

У вас есть 2 варианта.div элементы по умолчанию display: block.Либо используйте span s вместо div, либо стилируйте свои div, используя display: inline.