Как поставить интервал между этими параметрами с помощью CSS?
Я сделал приложение React о ценах на напиток из пауков, и я хотел бы добавить интервал между этими параметрами (такими как имя, цена, количество и т. д. См. Рисунок ниже для пояснения.) С помощью CSS.
Есть ли способ сделать это?
Изображение моего приложения React:
Спасибо!
Редактировать:
Вот мой код в моих файлах add-ингридиент.css и add-ингридиент.jsx:
.style-up {
padding: 1.5rem;
}import React from 'react'
import './add-ingredient.css'
const AddIngredient = () => {
return(
<div>
<form className = "style-up">
<div>
<label htmlFor = "ingredient-name">Name</label>
<input
type = "text"
required
minLength = "3"
id = "ingredient-name"/>
</div>
<div>
<label htmlFor = "ingredient-price">Price</label>
<input
type = "number"
min = "0.01"
id = "ingredient-price"/>
</div>
<div>
<label htmlFor = "ingredient-quantity">Quantity</label>
<input
type = "number"
min = "0.01"
id = "ingredient-quantity"/>
</div>
<div>
<label htmlFor = "ingredient-measure">Measure</label>
<select id = "ingredient-measure">
<option value = "unit" selected>Unit</option>
<option value = "Litres">Litres</option>
<option value = "grams">Grams</option>
</select>
</div>
<div>
<label htmlFor = "ingredient-currency">Currency</label>
<select id = "ingredient-currency">
<option value = "$" selected>$</option>
<option value = "£">£</option>
<option value = "RON">RON</option>
</select>
</div>
<div>
<button type = "submit">Add ingredient!</button>
</div>
</form>
</div>
)
}
export default AddIngredient;Ладно, обновлю свой пост.
—
22.08.2018 11:29
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
47
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
Просто используйте маржу, чтобы задать интервал между ними:
label { margin-right: 10px; }
Спасибо, @BhojendraNepal, это тоже сработало. ?
—
22.08.2018 11:36
Ответ принят как подходящий
Это решит вашу проблему:
Я только что добавил:
form > div{
margin-bottom:5px;
}
для расстояния между вариантами.
label {
margin-right: 10px;
}
для расстояния между label и input
Вы можете настроить значения обоих стилей в соответствии с вашими требованиями.
.style-up {
padding: 1.5rem;
}
form > div {
margin-bottom: 5px;
}
label {
margin-right: 10px;
}import React from 'react' import './add-ingredient.css' const AddIngredient = () => { return(
<div>
<form className = "style-up">
<div>
<label htmlFor = "ingredient-name">Name</label>
<input type = "text" required minLength = "3" id = "ingredient-name" />
</div>
<div>
<label htmlFor = "ingredient-price">Price</label>
<input type = "number" min = "0.01" id = "ingredient-price" />
</div>
<div>
<label htmlFor = "ingredient-quantity">Quantity</label>
<input type = "number" min = "0.01" id = "ingredient-quantity" />
</div>
<div>
<label htmlFor = "ingredient-measure">Measure</label>
<select id = "ingredient-measure">
<option value = "unit" selected>Unit</option>
<option value = "Litres">Litres</option>
<option value = "grams">Grams</option>
</select>
</div>
<div>
<label htmlFor = "ingredient-currency">Currency</label>
<select id = "ingredient-currency">
<option value = "$" selected>$</option>
<option value = "£">£</option>
<option value = "RON">RON</option>
</select>
</div>
<div>
<button type = "submit">Add ingredient!</button>
</div>
</form>
</div>
) } export default AddIngredient;Надеюсь, это было полезно для вас.
Добавить поле между элементами ввода
.style-up div{
margin: 10px 0;
}
Спасибо за другое решение, @karthik! ?
—
22.08.2018 11:45
Вы можете выбрать элементы по их «идентификатору» или «классу», а затем дать им отступ в CSS.
.element {
margin: 5px 2px;
}
(5 пикселей задают верхнее и нижнее поле) (2 пикселя задают левое и правое поле)
Спасибо за полезное решение, @RealMJDev. ?
—
23.08.2018 07:15
Другие вопросы по теме
Поставщик контекста React и потребитель
ReactJS не распознается
Разрушение объектов разной длины
Обновить значение свойства во вложенном массиве (состояние редукции)
Проблема развертывания с помощью react, nodejs, express в продакшене
События Mixpanel не отправляются
ReactJs TypeScript: синтаксическая ошибка: ожидаемый токен;
Реагировать: element.getBoundingClientRect не является функцией
Пример поля даты информирования? и другая документация
Как предварительно ввести данные клиента (кредитную карту, платежную информацию и т. д.) В кассе PayPal?
Похожие вопросы
Background-color не работает с динамически вставляемым элементом
Таблица в стиле таблицы - пустой первый столбец CSS
Анимация масштабирования трансформации с помощью Javascript
В Squarespace Как изменить положение изображения баннера
Класс стилей CSS игнорируется
После выбора переключателя в одной форме отобразите другую форму и вернитесь после отправки
Заполнить jQuery UI Datepicker из JSON
Контур не войдет в кнопки btn-group Bootstrap 4
Bootstrap 4 изображение на половину ширины страницы
Делаем поле заголовка адаптивным
Нам нужно увидеть код, чтобы помочь вам.