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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать кодер и декодер на языке verilog
30 апр. 2024, в 11:17
1 руб./за проект
Seo оптимизация корпоративного сайта
30 апр. 2024, в 10:55
25000 руб./за проект
Программа-тренажёр для решения задач целочисленного программирования
30 апр. 2024, в 10:36
12000 руб./за проект
Ещё заказы