如何在我的复选框内嵌和复选框旁边获取文本？

Question

我正在处理一个网页，在该网页中，我需要将与每个文本关联的文本放在复选框旁边。目前，它是这样的：

我不希望与它们关联的任何复选框或标签居中。我希望它们与左侧对齐。这是我的 JavaScript 和全局样式代码：

JS：

import React from 'react'

import { Link } from 'react-router-dom';
import { Form } from '../../global styles/index';
import { useForm } from 'react-hook-form';

function ArtistForm(){

    const { register, handleSubmit, errors } = useForm();
    const onSubmit = data => console.log(data);
    console.log(errors);
    
    return(
        <div>
            <Form onSubmit={handleSubmit(onSubmit)}>
                <div className="form-container">
                    <div className="row">
                        <div className="column">
                            <label>First Name:</label> 
                            <input type="text" placeholder="First Name" name="FirstName" ref={register({required: true, max: 30, min: 2})} />
                        </div>
                        <div className="column">
                            <label>Last Name:</label>
                            <input type="text" placeholder="Last Name" name="LastName" ref={register({max: 30, min: 2})} />
                        </div>
                    </div>
            
                    <div>
                        <label>Medium:</label>
                        <input type="checkbox" id= "designillustration" name="medium" /><span>Design & Illustration</span>
                        <input type="checkbox" id="digitalart" name="medium" /><span>Digital Art</span>
                        <input type="checkbox" id="drawing" name="medium" /><span>Drawing</span>
                        <input type="checkbox" id="paintingmixedmedia" name="medium" /><span>Painting & Mixed Media</span>
                        <input type="checkbox" id="photography" name="medium" /><span>Photography</span>
                    </div>


                    <div>
                        <label>Artist Bio:  </label>
                        <textarea placeholder="Bio" name="Bio" ref={register({required: true, maxLength: 500})} />
                    </div>
            </Form>
        </div>
    )
}

export default ArtistForm

表单组件的全局样式：

// form styling
export const Form = styled.form`
    max-width: 1000px;
    margin: 0 auto;

    label {
        float: left;
        text-align: left;
        display: inline-block;
        padding-left: 15px;
        text-indent: -15px;
    }

    input {
        box-sizing: border-box;
        width: 100%;
        border-radius: 4px;
        padding: 10px 15px;
        margin-bottom: 10px;
        font-size: 14px;
        margin-top: 10px; 
        display: block;
    }

    textarea {
        box-sizing: border-box;
        width: 100%;
        border-radius: 4px;
        padding: 10px 15px;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .form-container {
        display: flex;
        flex-direction: column;
        width: 90%;
        padding: 20px;
        
        @media(max-width: 500px){
            padding: 20px 50px 50px;
        }
    }

    div {
        display: inline-block, flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: .2rem;
    }

    p {
        margin: 0;
    }

    .instructions{
        text-align: center;
        margin-bottom: 40px;
    }

    .column {
        float: left;
        width: 50%;
        padding: 10px;
    }


    .row:after {
        content: "";
        display: table;
        clear: both;
    }
`

输入标签是否有干扰复选框如何显示它们的标签？我一遍又一遍地尝试使用display: inline-block，但由于某种原因，我无法让文本与复选框内联。我也尝试将标签的文本向左对齐，但没有任何运气。

Answer 1

根据您的代码，解决方案可以分 3 步完成：

1. 从input 选择器中删除以下样式

    width: 100%;
    display: block;
   

   这两种样式都为您的输入元素提供了宽度：100%，这会推动下面的文本。

2. 然后从那里，我要做的是将每个 input 和 span 对包装在 div 中。这会将两个内联元素分割到自己的容器中，同时将整个宽度分配给元素，例如

   <div>
      <input type="checkbox" id= "designillustration" name="medium" />
      <span>Design & Illustration</span>
   </div>
   

3. 添加以下 css 以恢复宽度：文本输入上的 100%

   input[type="text"] {
        width: 100%;
   }
   

这是一个演示第一个复选框输入行的解决方案的代码笔：https://codepen.io/ariellav/pen/poyvPKR

其他说明：

更换

label {
    float: left;
    text-align: left;
    display: inline-block;
    padding-left: 15px;
    text-indent: -15px;
}

与

label {
    display: block;
}

应该得到同样的结果

Answer 2

你已经设置好了

input{
width: 100%;
}

占用容器的整个宽度并且不允许文本内联显示

Answer 3

你必须有label标签旁边是/用于输入按钮。另外，你必须摆脱你的input{width: 100%;}

<input type="checkbox" id="designillustration" name="medium"/>
<label for="designillustration">Design & Illustration</label>