如何獲取我的復選框內聯旁邊和復選框旁邊的文本？

Question

我正在處理 web 頁面，在該頁面中，我需要將與每個文本關聯的文本放在復選框旁邊。 目前，它是這樣的：

我不希望與它們關聯的任何復選框或標簽居中。 我希望它們與左側對齊。 這是我的 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但由於某種原因我無法讓文本與復選框內聯。 我還嘗試將 label 的文本向左對齊，但沒有任何運氣。

Answer 1

你已經設置了你的

input{
width: 100%;
}

占用容器的整個寬度並且不允許文本內聯顯示

Answer 2

從您的代碼中，解決方案可以通過 3 個步驟完成：

1. 從input選擇器中刪除以下 styles

    width: 100%; display: block;

   這兩個 styles 都為您的輸入元素提供了 width: 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 3

您必須在旁邊有label標簽，用於輸入按鈕。 此外，您必須擺脫您的input{width: 100%;}

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