Удалить отступ справа от полей ввода

У меня есть этот гибкий бокс с несколькими полями ввода. Однако я не могу заставить его выглядеть так, как хочу. Вот код:

.inputSettings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 750px;
}

.inputSettings > form {
  background: red;
  border: 1px solid yellow;
  flex: 1;
}

.inputSettings > form > input {
  width: 165px;
  height: 30px;
  border-radius: 5px;
}

<div class = "inputSettings">
  <form>
    <label>First Name</label>
    <input type = "text" id = "fname" name = "fname">
  </form>
  <form>
    <label>First Name</label>
    <input type = "text" id = "fname" name = "fname">
  </form>
  <form>
    <label>First Name</label>
    <input type = "text" id = "fname" name = "fname">
  </form>
  <form>
    <label>First Name</label>
    <input type = "text" id = "fname" name = "fname">
  </form>
  <form>
    <label>First Name</label>
    <input type = "text" id = "fname" name = "fname">
  </form>
  <form>
    <label>First Name</label>
    <input type = "text" id = "fname" name = "fname">
  </form>
</div>

JSfiddle: https://jsfiddle.net/rz94hwbv/2/

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

Вы имеете в виду вот так - jsfiddle.net/rz94hwbv/7?

— 22.03.2018 18:07

Проблема в flex:1 на форме и измененной ширине на входе .... С flex:1 форма всегда будет настолько широкой, насколько это возможно.

— 22.03.2018 18:08

Что-то вроде этого ?? i.stack.imgur.com/o0ZvB.jpg

— 22.03.2018 18:09

Или это - jsfiddle.net/rz94hwbv/13

— 22.03.2018 18:11

Спасибо всем, flex-direction: column сделали свое дело.

— 22.03.2018 18:40

html css flexbox alignment

22.03.2018 18:00

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

145

Ответы 1

Проблема, которую я вижу, связана с flex:1; в отличие от ограниченной ширины .inputSettings > form > input. Если вы хотите, чтобы поля соприкасались с краями, входные данные должны иметь гибкий рост.

.inputSettings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 850px;
  border-right: 12px solid purple;
}

.inputSettings > form {
  background: red;
  border: 1px solid yellow;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.inputSettings > form > input {
    border-radius: 5px;
}

<div class = "inputSettings">
<form>
  <label>First Name</label>
  <input type = "text" id = "fname" name = "fname">
</form>

<form>
  <label>First Name</label>
  <input type = "text" id = "fname" name = "fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type = "text" id = "fname" name = "fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type = "text" id = "fname" name = "fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type = "text" id = "fname" name = "fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type = "text" id = "fname" name = "fname">
</form>
  
  <form>
  <label>First Name</label>
  <input type = "text" id = "fname" name = "fname">
</form>
</div>

22.03.2018 19:02

Другие вопросы по теме

Как поставить границы между отображаемыми и скрытыми элементами?

У меня есть ошибка при предоставлении фона в студии Android, указав значение android: background = "11000000", моя ошибка терминала опубликована ниже

Центрировать четыре div в строке bootstrap

Преобразование относительных значений background-size и background-position в абсолютные значения PX

Разместите div под другим div x пикселей от нижней части экрана

Измените положение элемента в сетке с помощью javascript

Выпадающее меню Joomla

Как я могу создать отзывчивый элемент div html, содержащий перетаскиваемые разделители?

Переход CSS: переход справа налево, а не слева направо

Scss - отключить границу при нажатии

Удалить отступ справа от полей ввода

Ответы 1

Другие вопросы по теме

Похожие вопросы