如何使用 CSS 在这些选项之间放置间距？

Question

我制作了一个关于蜘蛛饮料定价的 React 应用程序，我想在这些选项之间添加间距（例如名称、价格、数量等。请参见下图了解详情。）使用 CSS.

有办法吗？

我的 React 应用程序图片：

谢谢！

编辑：

这是我在 add-ingredient.css 和 add-ingredient.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;

Answer 1

简单地使用边距给它们之间的间距：

label { margin-right: 10px; }

Answer 2

这将解决您的问题：

我刚刚添加：

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;

希望对您有所帮助。

Answer 3

在输入元素之间添加边距

.style-up  div{
    margin: 10px 0;
}

Answer 4

您可以通过 "id" 或 "class" select 元素，然后在 CSS

中给它们留出边距

.element { margin: 5px 2px; }

（5px 设置上下边距） (2px设置左右边距)

如何使用 CSS 在这些选项之间放置间距？

How to Put Spacing Between these Options Using CSS?

css

whitespace

spacing

reactjs