WedX - журнал о программировании и компьютерных науках

поле ввода имеет неправильный размер

у меня действительно раздражающая проблема с размером поля ввода, и я не понимаю, как это работает.

Я получил этот код. HTML:

<div class="container">

  <div class="receipt">
    <p class="location"></p>
    <input type="text" id="checkoutField">

  <div class="checkoutButton">
     <a href="#/checkout">
       <p>some button</p>
     </a>         
  </div>

  </div>
</div>

Контейнер получил максимальную ширину 480px. И я хочу, чтобы и div checkoutButton, и поле ввода растягивались до этого предела ширины, а также имели поля в 20 пикселей с обеих сторон. Элементы также должны быть адаптивными, поэтому они не имеют фиксированного размера.

Это отлично работает в div, но я не могу заставить поле ввода работать так же. Я сделал jsfiddle, который также включает код CSS: jsfiddle

Почему вход ведет себя так и как это исправить?

html css
15.11.2015

Ответы:


1

Вместо того, чтобы вызывать margin left и right для отдельных элементов, лучше вызывать padding для родительского контейнера. Проверьте измененный код - https://jsfiddle.net/k7vzod4y/3/

.receipt {
   padding: 0 20px 24px;
}
.receipt .checkoutButton {
  margin: 0;
}
.receipt #checkoutField {
  width: 100%;
  margin: 0;
}

Надеюсь, это поможет.

15.11.2015

2

Это легко сделать с помощью CSS3-функции calc. Вы можете установить ширину на 100% - 40px, чтобы позаботиться о своих полях. Что-то вроде этого:

.receipt #checkoutField {
    width: calc(100% - 40px);
    border: 0;
    height: 40px;
    background-color: #35aba2;
    border-radius: 4px;
    margin-top: -6px;
    margin-left: 20px;
}

Вы можете увидеть это в действии в обновленной fiddle.

15.11.2015
  • Спасибо. Это тоже работает, на самом деле никогда раньше не видел функцию calc. 16.11.2015

    • 3

    Поэтому, посмотрев на ваш пример кода, я бы использовал следующий метод. Я использовал следующее в JSFiddle, на который вы ссылались, и это сработало, как вы упомянули, что хотели.

    Установите ширину поля ввода на 100%:

    .receipt #checkoutField {
    border: 0;
    width: 100%;
    height: 40px;
    background-color: #35aba2;
    border-radius: 4px;
    margin-top: -6px;
    margin-left: 20px;
    margin-right: 20px;
}

    И затем 100% ширина на кнопке оформления заказа:

    .receipt .checkoutButton {
    width: 100%;
    height: 50px;
    background-color: #35aba2;
    border-radius: 4px;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
    margin-top: -6px;
}

    Этот метод также отзывчив, потому что я использовал проценты, которые являются связанными единицами, поэтому они наследуются от родителя. Таким образом, ширина 100% всегда будет равна полной ширине родителя, независимо от размера окна просмотра.

    15.11.2015
  • Я тоже пробовал это, но, как вы можете видеть, они выходят за пределы контейнера. Вы можете увидеть размер контейнеров по теням. Вот что происходит jsfiddle.net/k7vzod4y/4 16.11.2015
  • Кажется, это margin-left: 20px, из-за которого элементы внутри контейнера немного выталкиваются. Так что удаление работает. 16.11.2015
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]