Javascript 如何对齐标签和按钮，以及

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

以下是我的帐户代码：

import React，{useState}来自“React”
从“样式化组件”导入样式化，{createGlobalStyle}
从“@material ui/icons/Clear”导入ClearIcon；
从“../components/css/MyAccount.css”导入css
const GlobalStyle=createGlobalStyle`
@导入url（'https://fonts.googleapis.com/css?family=Raleway');
身体{
字体系列：“Raleway”，无衬线；
}`
功能MyAccount（道具）{
返回(
电子邮件
编辑
用户名
编辑
)
}
const Button=styled.Button`
颜色：#000；
背景色：#00FF60；
字号：1em；
边框：2px实心#00ff60；
边界半径：8px；
身高：10%；
宽度：10%；
保证金：0自动；
填充：0；
垂直对齐：中间对齐；
&：悬停{
背景色：#16161b；
颜色：#f1f1；
边框颜色：#f1f1；
}
`;
导出默认MyAccount

Label在MyAccount.css中有自己的css（现在它是空的，因为我不知道如何做我正在尝试做的事情），它是：

.MyAccount{
显示器：flex；
位置：绝对位置；
宽度：800px；
高度：400px；
排名前10%；
证明内容：中心；
对齐内容：居中对齐；
左：15%；
边界半径：12px；
z指数：1200；
盒影：0.9999px rgba（0,0,0,0.5）；
背景：#0b0b0b；
颜色：白色；
边框：1px纯绿色；
}
.标签{
}
@仅介质屏幕和（最大宽度：1200px）{
}
@仅介质屏幕和（最大宽度：1680px）{
.我的帐户{
左：25%；
}
}
@仅介质屏幕和（最小宽度：1680px）{
.我的帐户{
左：560px；
}
}

您需要将其视为框、电子邮件框和用户框，框将是div，在每个div中您将有两个组件（标签和按钮）。div本身将有一个“display:block”属性，这将使它们占据整行，每个div中的组件需要是“display:inline”（当然是最基本的）

因此：

电子邮件
做你的东西

---

这两种方式都会按照您的意愿显示它们，但是，您应该使用谷歌“flex box”，这将使所有内容都更具响应性和更简单；）

两张图片都是一样的。对不起，我已经修改了。试试这个-

非常感谢Gabriel！我会的。

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