Задать вопрос
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% это больше ширины экрана
  • Вопрос задан
  • 244 просмотра
Комментировать
Подписаться 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 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 450 $
Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер
BYTIME
от 130 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Стилизовать поля в карточке товара Тильда
28 дек. 2024, в 12:52
500 руб./за проект
Доработать тг бота
28 дек. 2024, в 12:27
1000 руб./в час
Закончить разработку мобильного приложения FLUTTER-Dart
28 дек. 2024, в 11:51
40000 руб./за проект
Ещё заказы