Как сделать так, чтобы текст рядом с моим флажком был встроен, а рядом с флажком?

Question

Я работаю над веб-страницей, на которой мне нужно, чтобы текст, связанный с каждым текстом, был рядом с флажком. В настоящее время это выглядит так:

I do not want any of the checkboxes or labels associated with them to be centered. I want them to be aligned to the left. Here are my JavaScript & global style code:

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(
        
            
                 Имя:   Фамилия:     Средний:  Дизайн и иллюстрации  Цифровое искусство  Чертеж  Живопись и смешанная техника  Фотография    Биография художника:    )} экспорт по умолчанию 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 type="checkbox" id="designillustration" name="medium"/>
<label for="designillustration">Design & Illustration</label>