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

Posted 2023-02-22

【中文标题】如何在我的复选框内嵌和复选框旁边获取文本？

【英文标题】：How to get the text next to my checkbox inline, and next to checkbox?

【发布时间】：2020-11-27 06:05:17

【问题描述】：

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

我不希望与它们关联的任何复选框或标签居中。我希望它们与左侧对齐。这是我的 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，但由于某种原因，我无法让文本与复选框内联。我也尝试将标签的文本向左对齐，但没有任何运气。

【问题讨论】：

使用display: flex; align-items: center;

不确定您的 CSS 是从哪里获得的，但 display: inline-block, flex 不是有效的 CSS。显示值不是逗号分隔的，实际上display没有多个值。

为您输入样式，删除display: block。输入的自然显示为 inline-block，这是您寻找的行为所需要的。

【参考方案1】：

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

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

 width: 100%;
 display: block;

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

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

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

添加以下 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;

应该得到同样的结果

【参考方案2】：

你已经设置好了

input
width: 100%;

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

【讨论】：

显示：块；也使元素占据容器的整个宽度

【参考方案3】：

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

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