ivankarmanow
@ivankarmanow
Начинающий программист

Как сделать, чтобы блоки 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
  • Вопрос задан
  • 240 просмотров
Решения вопроса 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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы