Как сделать флекс элементы прилипающими к друг другу?
Нужно, чтобы чекбокс и текст прижимались друг к другу. Как это реализовать?
HTML
<section class="sale"> <form class="sale__form" action=""> <h2 class="sale__title"> Получите гарантированную скидку -20% на весь тур </h2> <p class="sale__text"> Cкидка действует для участников ранней брони до 1 мая </p> <div class="sale__call-box"> <div class="sale__input-block"> <input placeholder="(123) 456-7890" id="saleInp" class="sale__input" type="tel" /> <label class="sale_label" for="saleInp">Телефон</label> </div> <button type="submit" class="sale__btn">Перезвоните мне</button> </div> <label class="sale_checkbox"> <input class="checkbox" type="checkbox" /> <span class="check__style"></span> <p class="sale_checkbox-text">Я согласен на обработку персональных данных</p> </label> </form> </section> |
<section class="sale"> <form class="sale__form" action=""> <h2 class="sale__title"> Получите гарантированную скидку -20% на весь тур </h2> <p class="sale__text"> Cкидка действует для участников ранней брони до 1 мая </p> <div class="sale__call-box"> <div class="sale__input-block"> <input placeholder="(123) 456-7890" id="saleInp" class="sale__input" type="tel" /> <label class="sale_label" for="saleInp">Телефон</label> </div> <button type="submit" class="sale__btn">Перезвоните мне</button> </div> <label class="sale_checkbox"> <input class="checkbox" type="checkbox" /> <span class="check__style"></span> <p class="sale_checkbox-text">Я согласен на обработку персональных данных</p> </label> </form> </section>
CSS
.sale { padding: 150px 141px; background: url(../img/sale-bg.jpg) no-repeat; background-size: cover; } .sale__form { margin: 0 auto; padding: 80px 121px 114px; background-color: #fbfbfb; text-align: center; max-width: 1620px; } .sale__title { font-family: "Le Murmure"; font-size: 100px; line-height: normal; margin-bottom: 50px; } .sale__text { font-size: 24px; font-weight: 500; line-height: 170%; margin-bottom: 40px; } .sale__call-box { display: flex; gap: 35px; justify-content: center; align-items: center; padding-bottom: 30px; max-width: 640px; margin: 0 auto; } .sale__input-block { position: relative; } .sale__input { position: relative; z-index: 5; width: 300px; height: 67px; background-color: transparent; border: 1px solid #8c8c8c; transition: 0.2s ease; padding: 25px 40px 16px 20px; } .sale__input::placeholder { opacity: 0; } .sale_label { position: absolute; z-index: 400; top: 25px; left: 18px; color: #8c8c8c; user-select: none; transition: all 0.2s ease; } .sale__input:focus + .sale_label, .sale__input:not(:placeholder-shown) + .sale_label { font-size: 10px; top: 7.8px; } .sale__input:focus::placeholder { opacity: 1; } .sale__btn { padding: 20px 40px; background-color: #dab808; width: 300px; border: none; font-weight: 600; line-height: 150%; transition: 0.2s ease; cursor: pointer; } .sale__btn:hover { background-color: #e9c71e; } .sale_checkbox { display: inline-flex; align-items: center; vertical-align: middle; color: #8c8c8c; } .checkbox { position: absolute; z-index: -1; width: 0; height: 0; opacity: 0; } .check__style { display: block; position: relative; min-width: 19px; height: 19px; border: 1px solid #8c8c8c; cursor: pointer; margin-right: 10px; margin-top: -1px; } .check__style::before { content: ""; position: absolute; top: 3px; left: 3px; transform: scale(0); width: 12px; height: 12px; background-image: url(../img/check.svg); background-repeat: no-repeat; transition: 0.2s ease; } .checkbox:checked + .check__style::before { transform: scale(1); } |
.sale { padding: 150px 141px; background: url(../img/sale-bg.jpg) no-repeat; background-size: cover; } .sale__form { margin: 0 auto; padding: 80px 121px 114px; background-color: #fbfbfb; text-align: center; max-width: 1620px; } .sale__title { font-family: "Le Murmure"; font-size: 100px; line-height: normal; margin-bottom: 50px; } .sale__text { font-size: 24px; font-weight: 500; line-height: 170%; margin-bottom: 40px; } .sale__call-box { display: flex; gap: 35px; justify-content: center; align-items: center; padding-bottom: 30px; max-width: 640px; margin: 0 auto; } .sale__input-block { position: relative; } .sale__input { position: relative; z-index: 5; width: 300px; height: 67px; background-color: transparent; border: 1px solid #8c8c8c; transition: 0.2s ease; padding: 25px 40px 16px 20px; } .sale__input::placeholder { opacity: 0; } .sale_label { position: absolute; z-index: 400; top: 25px; left: 18px; color: #8c8c8c; user-select: none; transition: all 0.2s ease; } .sale__input:focus + .sale_label, .sale__input:not(:placeholder-shown) + .sale_label { font-size: 10px; top: 7.8px; } .sale__input:focus::placeholder { opacity: 1; } .sale__btn { padding: 20px 40px; background-color: #dab808; width: 300px; border: none; font-weight: 600; line-height: 150%; transition: 0.2s ease; cursor: pointer; } .sale__btn:hover { background-color: #e9c71e; } .sale_checkbox { display: inline-flex; align-items: center; vertical-align: middle; color: #8c8c8c; } .checkbox { position: absolute; z-index: -1; width: 0; height: 0; opacity: 0; } .check__style { display: block; position: relative; min-width: 19px; height: 19px; border: 1px solid #8c8c8c; cursor: pointer; margin-right: 10px; margin-top: -1px; } .check__style::before { content: ""; position: absolute; top: 3px; left: 3px; transform: scale(0); width: 12px; height: 12px; background-image: url(../img/check.svg); background-repeat: no-repeat; transition: 0.2s ease; } .checkbox:checked + .check__style::before { transform: scale(1); }
Дополнительно:
Ответы:
а зачем тут
.check__style { display: block; position: relative; min-width: 19px; height: 19px; border: 1px solid #8c8c8c; cursor: pointer; margin-right: 10px; margin-top: -1px; } |
.check__style { display: block; position: relative; min-width: 19px; height: 19px; border: 1px solid #8c8c8c; cursor: pointer; margin-right: 10px; margin-top: -1px; }
обяъвлен margin-right?
- вот за этим
- Overlord934, ты спрашиваешь как убрать марджин который добавил правилом марждин-райт 10 пикселей.
- Overlord934, тогда чего нужно добиться? чтобы не было выравнивания по центру, если текст переносится? или вообще выравнивания по центу?
- Kentavr16, нет, я спрашиваю как сделать так чтоб текст и чекбокс были рядом. Соответственно чекбокс отталкивался марджином от текста. Т.е нужно чтоб ширина блока с текстом была равна содержимому. А флекс растягивает их
- IvanU7n, Нужно, чтобы чекбокс отталкивался непосредственно от самого текста. Тоесть ширина блока с текстом подстраивалась под контент.
- Overlord934, тогда уберите выравнивание по центру, например переопределив в .sale_checkbox добавлением text-align: left;
а так было бы хорошо, если бы текст мог уменьшаться после занятия нескольких строк, но увы это невозможно
Если я правильно понял задачу, то к сожалению это дефолтное поведение - при изменении размера блока текст может переноситься, при этом если он центрирован - по бокам буду появляться пробелы. Логично, браузер просто вписывает текст в текущий размер блока. Для того чтобы чекбокс был на определенном расстоянии от текставсегда, я вижу только такое простое решение - отключить перенос текста и отцентрировать все это дело. snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать flex элементы прилипающими друг к другу, вы можете использовать свойство flex-wrap со значением nowrap в родительском контейнере. Это позволит элементам не переноситься на следующую строку и они будут прижиматься друг к другу.
Пример использования:
.container { display: flex; flex-wrap: nowrap; }
Таким образом, все дочерние элементы внутри контейнера будут прижаты друг к другу без разрывов. Кроме того, вы можете использовать свойства flex-grow и flex-shrink для управления тем, насколько элементы расширяются или сжимаются, чтобы они занимали доступное пространство более равномерно.
Если вам нужно добавить промежутки между элементами, вы можете использовать свойство margin на дочерних элементах или задать отступы между ними с помощью свойства justify-content в родительском контейнере.
Например:
.container { display: flex; flex-wrap: nowrap; justify-content: space-between; } .item { margin-right: 10px; }
Таким образом, элементы будут располагаться равномерно с промежутками между ними. Надеюсь, это поможет вам сделать flex элементы прилипающими к друг другу. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.