Css 将标记移动到待办事项栏的顶部

蓝绿色背景的废文本是一个标记，我希望标记显示在待办事项栏的上方……有点像这样：

就像一个大长方形上的一个小长方形。所以标签应该在待办事项栏的左上角。我将如何实现这一点？我试过给标签留边距，但根本没用

标签的CSS（style.CSS）

React标签部分的JS代码（Todo.JS）

{isSpent&&
花费
}
{isReceived&
已收到
}${text}

如果任何人需要整个

todo.css

文件：

---

如果您需要更多信息，或者我的问题措辞不当，请告诉我。非常感谢您的帮助。谢谢大家!

我认为如果您将标签和导航栏分离为两个不同的div标签，并将它们放在主div上，比如：

<div id="wrapper">
    <div id="top-left">top left div</div>
    <div id="down">down side div</div>
</div>

结果是：

---

我认为如果您将标签和导航栏分离为两个不同的div标签，并将它们放在主div上，比如：

<div id="wrapper">
    <div id="top-left">top left div</div>
    <div id="down">down side div</div>
</div>

结果是：

---

我会这样做，其中

输入：focus

可以是

.container

上设置的类，例如，如果输入有任何值

我不明白你为什么在你的原始代码中使用

li

和

p

，因为你需要覆盖太多东西才能让它看起来漂亮

如果你想创建一个响应性强的站点，只需覆盖

正文

中的字体大小，就可以在固定的像素值上使用“rem”来缩放所有内容

.container{
位置：相对位置；
显示器：flex；
}
身体，
输入{
填充：1rem；
}
.container.selected>.todo项，
输入：焦点~待办事项{
transform:translateY（-1rem）；
}
.待办事项{
位置：绝对位置；
左：1rem；
转换：translateY（1rem）；
转换：转换400ms；
}
.标签{
颜色：白色；
字体大小：15px；
字体大小：400；
字母间距：2px；
文本转换：大写；
背景：#36d1dc；
填充：3倍；
边界半径：5px；
边框左下半径：0px；
边框右下半径：0px；
}

花费
我将使用类似的方法，其中
input:focus
可以是
.container
上设置的类，例如，如果输入有任何值

我不明白你为什么在你的原始代码中使用
li
和
p
，因为你需要覆盖太多东西才能让它看起来漂亮

如果你想创建一个响应性强的站点，只需覆盖
正文
中的字体大小，就可以在固定的像素值上使用“rem”来缩放所有内容


.container{
位置：相对位置；
显示器：flex；
}
身体，
输入{
填充：1rem；
}
.container.selected>.todo项，
输入：焦点~待办事项{
transform:translateY（-1rem）；
}
.待办事项{
位置：绝对位置；
左：1rem；
转换：translateY（1rem）；
转换：转换400ms；
}
.标签{
颜色：白色；
字体大小：15px；
字体大小：400；
字母间距：2px；
文本转换：大写；
背景：#36d1dc；
填充：3倍；
边界半径：5px；
边框左下半径：0px；
边框右下半径：0px；
}

花费

正文{
背景色：#48AEE0；
}
.集装箱{
高度：200px；
宽度：500px；
显示器：flex；
弯曲方向：立柱；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
}
.标签{
颜色：白色；
字体大小：15px；
字体大小：400；
字母间距：2px；
文本转换：大写；
背景：#36d1dc；
填充：3倍；
宽度：80px；
文本对齐：居中；
边界半径：5px；
边框左下半径：0px；
边框右下半径：0px；
}
.其他{
保证金：0；
显示：内联flex；
弯曲方向：立柱；
}
输入{
高度：30px；
宽度：200px；
边框：白色；
保证金：0；
}

花费

正文{
背景色：#48AEE0；
}
.集装箱{
高度：200px；
宽度：500px；
显示器：flex；
弯曲方向：立柱；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
}
.标签{
颜色：白色；
字体大小：15px；
字体大小：400；
字母间距：2px；
文本转换：大写；
背景：#36d1dc；
填充：3倍；
宽度：80px；
文本对齐：居中；
边界半径：5px；
边框左下半径：0px；
边框右下半径：0px；
}
.其他{
保证金：0；
显示：内联flex；
弯曲方向：立柱；
}
输入{
高度：30px；
宽度：200px；
边框：白色；
保证金：0；
}

花费
请发布您的html结构，仅此部分。完成，谢谢@Gosi！您好…我仍然有这个问题：）请发布您的html结构也，只是为了这一部分。完成，谢谢@Gosi！嗨…我仍然有这个问题：）。我做错了什么？我唯一没有包括的是
#左上
的背景和
#左上
的宽度，谢谢你！我认为这里的技术是使用包装器上的显示网格并定义两个div标记的大小，您尝试过吗？（也将浮动定义为左）我在中添加了
#左上
的宽度，并且我已经在
#左上
和
#下
中将浮动定义为左。当我为
#左上
添加宽度时，我得到的只是一个更宽的标签。我做错了什么？我唯一没有包括的是
#左上
的背景和
#左上
的宽度，谢谢你！我认为这里的技术是使用包装器上的显示网格并定义两个div标记的大小，您尝试过吗？（也将float定义为left）我在中为
#左上
添加了宽度，并且我已经在中将float定义为left
<div id="wrapper">
    <div id="top-left">top left div</div>
    <div id="down">down side div</div>
</div>

#wrapper {
  display: grid;
}

#top-left {
  background: green;
  width: 250px;
  float:left;
  margin-right: 20px;
}
#down {
  background: blue;
  float:left;
  width: 500px;
}