Hiroshima
@Hiroshima
Ровный пацанчик нигде не пропадет !

Как растянуть блок на всю ширину?

Недо код:
<form name="filters" autocomplete="off" class="filters">
                    <div class="pole-f-1">
                        <div class="box-p-1">
                            <button type="button" class="but-p">Марка
                                <img src="/images/icon/strelka.svg" class="strelka">
                            </button>
                        </div>

                        <div class="box-p-1">
                            <button type="button" class="but-p">Модель
                                <img src="/images/icon/strelka.svg" class="strelka">
                            </button>
                        </div>

                        <div class="box-p-1">
                            <button type="button" class="but-p">Поколение
                                <img src="/images/icon/strelka.svg" class="strelka">
                            </button>
                        </div>
                    </div>
                </form>


.pole-f-1 {
                display: flex;
            }
            
            .box-p-1 {
                position: relative;
                display: flex;
                justify-content: center;
            }
            
            .but-p {
                font-size: 14px;
                height: 30px;
                text-align: left;
                padding: 2px 0px 2px 10px;
                border: none;
                background-color: #fff;
                outline: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 10px;
            }
            
            .but-p:focus {
                box-shadow: 0 0 10px rgb(255, 255, 255);
                transition: 0.2s;
            }
            
            .strelka {
                width: 15px;
                transform: rotate(180deg);
                transition: 0.3s;
                color: rgb(255, 0, 0);
                padding: 0 20px;
            }
            
            .strelka:hover {
                transform: rotate(0deg);
            }


5f819c3b5db6d769104463.jpeg
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
B-Erolskiy
@B-Erolskiy
Junior PHP Developer
.pole-f-1 {
    justify-content: space-around;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
art9mid
@art9mid
front-end
Форме задай display: block (он по умолчанию в многих браузерах стоит); width: 100%
Ответ написан
Ваш ответ на вопрос

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

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