Задать вопрос
woonem
@woonem
html

Почему текст вылетает за экран и как это исправить?

Сайт: fixpc.tk
<html>
<head>
<meta charset="utf-8">
<title>Страница</title>
</head>
<body style="width: 100%; padding: 0; margin: 0; background-color: #000000; font-weight: 700; font-size: 18px;">
<div style="position: fixed; top: 0; left: 0; right: 0; display: table; opacity: 0.9; color: #7AB; width: 100%; background-color: #ffffff; padding: 16px; padding-top: 8px; padding-bottom: 8px; white-space: nowrap;">
<div style="font-size: 22px;">Лого</div>
<div style="display: inline-block; width: 50%; text-align: left;">
xxxxxxx x xxxxxxx xx x xxxxxxxxx
</div>
<div style="display: inline-block; width: 50%; text-align: right;">
xxxxxxx, xxxxxxx
</div>
</div>
</body>
</html>


9f7954bed9fa40eaa216c3b47716e16d.png

"xxxxxxx, xxxxxxx" не видно полностью
Это из-за того, что у fixed элементов width: 100% это больше ширины экрана
  • Вопрос задан
  • 242 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Lumore
@Lumore
Front-end developer
К 100% ширине вы добавили padding: 16px и ширина увеличилась, чтобы такого не было добавьте в head:
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Поправить сайт (мобильная версия) на WordPress
24 нояб. 2024, в 04:16
5000 руб./за проект
Необходимо поменять пароль в WINDOWS
24 нояб. 2024, в 03:11
500 руб./за проект
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Ещё заказы