Вывод текста на одной строке html

130

20 января 2021, 15:00

Мне надо использовать цвета background и color. Я пишу так.

<div style="background-color: #8c8c8c; color: #ffffff;">hello</div>
<div style="background-color: #ffffff; color: #000000;">0c0c0c</div>

Но текст почему то на разных строках оказывается, а мне надо чтобы на одной строке был текст. Как это сделать? div не обязательно, но главное чтобы background-color и color можно было задать и ещё шрифт.

Answer 1

• Обычно используют тег <span> для работы с текстом. У блоков div по умолчанию стоит display: block; - который переносит их на отдельную строку и дает ширину 100%. Они будут вести себя как span, если задать display: inline;

• CSS позволяет вынести все стили из HTML в отдельное место. Так легче работать с кодом, особенно если у вас будет много таких подкрашенных кусков. Каждый раз достаточно будет добавлять на элемент класс с нужной краской, а не весь код. Это дело добавляется где-то вверху страницы, внутри <style> тега, здесь </style>

• Цвет вида #aa33bb можно сократить до #a3b

Пример:

.hello {  
  background-color: #888;  
  color: #fff;  
  font-family: 'Monotype Corsiva';  
  font-size: 25px; 
} 
 
.bubu { background-color: #fff; color: #000; }

<span class="hello">hello</span> 
<span class="bubu">0c0c0c</span> 
 
<span class="hello">1122334455</span> 
<span class="bubu">0c0c0c</span> 
 
<span class="hello">mooooo</span> 
<span class="bubu">0c0c0c</span>

Answer 2

div - по умолчанию блочный элемент. Вам нужно принудительно задать ему свойство

display: inline-block;

тогда блоки будут расположены друг за другом. Но, рекомендую Вам ознакомиться с bootstrap, это очень удобно и практично при решении вопросов с вёрсткой. Итого:

<div style="display: inline-block; background-color: #8c8c8c; color: #ffffff;">hello</div>
<div style="display: inline-block; background-color: #ffffff; color: #000000;">0c0c0c</div>