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

Question

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

布局

这是标签和按钮的当前情况

以下是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

Label在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;
}
}

Answer 1

您需要将其视为框、电子邮件框和用户框，框将是div，在每个div中，您将有两个组件(标签和按钮(，div本身将有一个"显示：块"；属性，这将使它们占据整行，每个div内的组件需要是"；显示：内联；(当然是基础知识(

所以：

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

这两个都会显示他们，你想，然而，你应该谷歌"柔性盒"；这将使一切反应更灵敏、更容易；(