如何对齐标签和按钮内联和答案

【问题标题】：How to align labels and buttons inline and如何对齐标签和按钮内联和
【发布时间】：2021-03-09 10:54:37
【问题描述】：

我正在自学前端开发，我正在尝试使用 React 和 styled-components 构建一个简单的 MyAccount 页面。我想用这样的标签和按钮创建一个简单的布局（当然更漂亮）：

This is the current situation of the label and the buttons

这是 myAccount 代码：

import React, {useState} from 'react'
import styled, {createGlobalStyle} from 'styled-components'
import ClearIcon from '@material-ui/icons/Clear';
import css from '../components/css/MyAccount.css'

const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css?family=Raleway');
body {
    font-family: 'Raleway', sans-serif;
}`


function MyAccount(props) {
    return(
        <>
            <GlobalStyle></GlobalStyle>
            <div className='MyAccount'>
                <div className='CloseButton1'>
                    <ClearIcon fontSize='large' onClick={props.onClose}></ClearIcon>
                </div>
                <label>Email</label>
                <Button>Edit</Button>
                <label>Username</label>
                <Button>Edit</Button>
            </div>
        </>
    )
}

const Button = styled.button`
    color: #000;
    background-color: #00FF60;
    font-size: 1em;
    border: 2px solid #00ff60;
    border-radius: 8px;
    height:10%;
    width:10%;
    margin: 0 auto;
    padding: 0;
    vertical-align: middle;

    &:hover {
        background-color: #16161b;
        color: #f1f1f1;
        border-color: #f1f1f1;
    }
`;

export default MyAccount

标签在 MyAccount.css 中有自己的 css（现在它是空的，因为我不知道如何做我想做的事），它是：

.MyAccount{
    display: flex;
    position: absolute;
    width: 800px;
    height: 400px;
    top:10%;
    justify-content: center;
    align-content: center;
    left:15%;
    border-radius: 12px;
    z-index: 1200;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
    background: #0b0b0b;
    color: white;
    border: 1px solid green;
}

.label{
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 1680px) {
    .MyAccount{
        left: 25%;
    }
}

@media only screen and (min-width: 1680px) {
    .MyAccount{
        left: 560px;
    }
}

【问题讨论】：

两张图片相同。
抱歉，已修复。
试试这个 - <div><label><button></div> <div><label><button> </div>

标签： javascript html css reactjs styled-components

【解决方案1】：

您需要将其视为框、电子邮件框和用户框，框将是 div，在每个 div 内您将拥有两个组件（标签和按钮），div 本身将具有“显示：块” " 属性，这将使它们占据整行，每个 div 内部的组件需要是 "display:inline" （当然是说基础知识）

所以：

<div>
    <label style="display:inline">Email</label>
    <button style="display:inline">make your thing</button>
</div>

这两种方式都会根据需要显示它们，但是，您应该在 Google 上搜索“flex-box”，这将使一切响应更快、更容易；）

【讨论】：

非常感谢加布里埃尔！我会的。