Member 13955368 Ответов: 1

Как мне достичь того, что я пытаюсь сделать в этом HTML-коде

Я пытаюсь установить поля правильной ширины, в этой контактной форме, которую я создаю, поля находятся в форме таблеток (левая и правая стороны), я бы хотел, чтобы левая сторона была зафиксирована на ширине текста, который находится внутри поля, однако с правой стороны я бы хотел, чтобы она была зафиксирована на ширине 6 столбцов независимо от любого текста, который находится внутри поля.

Что я уже пробовал:

Я пробовал использовать ширину столбцов, редактировать span, div и т. д. Я приложил кодовое перо с примером, может ли кто-нибудь помочь, пожалуйста? Я также могу отправить скриншот того, как я хочу, чтобы он выглядел, если мое объяснение не так уж хорошо!

Тестовые поля - HTML[^]

1 Ответов

Рейтинг:
0

Member 12656556

Я просто переписываю 

/* pill box start */
стиль здесь
Я добавил некоторый стиль и удалил некоторый стиль в css
Пожалуйста добавьте эти строки может быть вы получите результат хотите чтобы вы хотели

.pill-green .pill-box-left {
    background-color: #367782;
    color: white;
    border: none;
    height: 32px;
    display: inline-block;
    float: left;
    width: 110px;
        padding: 0 5px;
}
.pill-box-right {
    background-color: #fff;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: 0;
    padding-left: 4px;
    color: white;
    width: calc(100% - 124px);
    display: inline-block;
    float: right;
    height: 32px;
}
.pill-box {
    line-height: 30px;
    border: 1px solid #000;
    margin-bottom: 20px;
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
    border-radius: 2px;
}
.pill-green .pill-box-left {
    background-color: #367782;
    color: white;
    border: none;
    height: 32px;
    display: inline-block;
    float: left;
    width: 110px;
}
.pill-box-right {
    background-color: #fff;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: 0;
    padding-left: 4px;
    color: white;
    width: calc(100% - 124px);
    display: inline-block;
    float: right;
    height: 32px;
}