Задать вопрос
ivankarmanow
@ivankarmanow
Начинающий программист
html

Как сделать, чтобы блоки div занимали ровно половину родителя по ширине?

Проблема в том, что у двух блоков div задана ширина 50%, внешний отступ 0 и display inline-block, но при этом второй блок перемещается на следующую строку

Разметка HTML страницы:
<body>
    <div class="cont">
        <form>
            <span class="lbl">Номер работы</span>
            <label>
                <input id="num" type="number" min="1" max="58">
            </label>
            <span class="lbl">Номер варианта</span>
            <label>
                <input id="var" type="number" min="1" max="8">
            </label>
            <span class="lbl">Файл с кодом</span>
            <label>
                <div class="file_info"></div>
                <div class="inp_file">Выбрать файл</div>
                <input type="file" name="file" accept="text/*" id="code">
            </label>
            <span class="lbl">ФИО</span>
            <label>
                <input type="text" id="fio">
            </label>
            <span class="lbl">Скриншот результата</span>
            <label>
                <div class="file_info"></div>
                <div class="inp_file">Выбрать изображение</div>
                <input type="file" accept="image/*">
            <button id="subm">Отправить</button>
        </form>
    </div>
</body>


Стили CSS:
body {
            background: #141414;
            width: 100%;
            height: 100%;
            position: fixed;
        }
        form * {
            border: none;
            border-radius: 6px;
            /* padding: 0 0 0 15px; */
            margin: 10px 0;
            font-size: 18px;
            display: block;
            box-sizing: border-box;
        }
        .inp_file {
            margin: 10px 0;
            height: 60px;
            width: 50%;
            background-color: buttonface;
            color: black;  
            text-align: center;
            line-height: 60px;
            display: inline-block;
        }
        .file_info {
            border: 1px solid #424242;
            width: 50%;
            margin: 10px 0;
            padding: 0;
            height: 60px;
            display: inline-block;
            line-height: 60px;
            vertical-align: middle;
            text-align: center;
        }

Необходимо сделать так, чтобы блоки были в одну строку и между ними не было никакого расстояния
638cbb0b9a77b483266697.jpeg
638cbb3441381155147832.jpeg
638cbb3eec035876322717.jpeg
  • Вопрос задан
  • 408 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
Потому что между инлайновыми элементами (inline, inline-block) есть отступы/пробелы. Можете просто для теста внутри label написать оба div-а в одну строку, тогда второй не будет переноситься (хотя в разных браузерах работает по разному):
<label>
  <div class="file_info"></div><div class="inp_file">Выбрать файл</div>
  <input type="file" name="file" accept="text/*" id="code">
</label>


Для решения данной проблемы можете:
1) Добавить родительскому элементу, то бишь тегу label
label {
  white-space: nowrap;
}


2) Использовать flex (что имхо в разы удобнее и лучше):
label {
  display: flex;
  flex-wrap: wrap;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
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 руб./за проект
Ещё заказы