0

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

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

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

2 ответа 2

1

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>
1
  • Да я в qt делаю программу. Там надо в html тегах задать текст.
    – user302477
    1 июн 2019 в 15:21
0

• Обычно используют тег <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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.