复选框和标签在同一行

Question

我想使用模式window制作过滤器。但是我有一个问题，复选框和标签出现在不同的行上。

但我希望在同一行上看到复选框和标签之间有一点 space。告诉我如何做到这一点。我的代码如下。

export default function FilterMethod  () {
    const [methods, setMethods] = useState([]);

    const onMethodChange = (e) => {
        let selectedMethods = [...methods];

        if (e.checked)
            selectedMethods.push(e.value);
        else
            selectedMethods.splice(selectedMethods.indexOf(e.value), 1);

        setMethods(selectedMethods);
    }

    return (

            <div>
                <h6>Method</h6>
                <div>
                    <Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
                    <label htmlFor="method1">Connect</label>
                </div>
                <div className="field-checkbox">
                    <Checkbox inputId="method2" name="method" value="Delete" onChange={onMethodChange} checked={methods.indexOf('Delete') !== -1} />
                    <label htmlFor="method2">Delete</label>
                </div>
                <div className="field-checkbox">
                    <Checkbox inputId="method3" name="method" value="Get" onChange={onMethodChange} checked={methods.indexOf('Get') !== -1} />
                    <label htmlFor="method3">Get</label>
                </div>
                <div className="field-checkbox">
                    <Checkbox inputId="method4" name="method" value="Head" onChange={onMethodChange} checked={methods.indexOf('Head') !== -1} />
                    <label htmlFor="method4">Head</label>
                </div>

            </div>

    )}

Answer 1

您可以将复选框转换为内联元素：

<div>
  <Checkbox style={{display: "inline"}} inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
  <label htmlFor="method1">Connect</label>
</div>

或者，使用弹性布局：

<div style={{display: "flex"}}>
  <Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
  <label htmlFor="method1">Connect</label>
</div>

Answer 2

默认情况下，div - 复选框的父元素是块级元素。如果将其更改为 flex，它应该可以工作。

<div style={{display: "flex"}}>
  <Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
  <label htmlFor="method1">Connect</label>
</div>

更新。

在复选框和标签之间添加space

根据你需要多少space和div的宽度，你可以使用

 <div style={{display: "flex", justifyContent: "space-between"}}>
 
 - - -

在 Checkbox 的最外层元素上设置 padding-right / margin-right
在标签上设置padding-left / margin-left

复选框和标签在同一行

Checkbox and label in same line

css

reactjs

更新。