Html 将跨距与按钮放在同一行上

我有一些带有按钮和跨距的面板（以文本形式显示一些信息）。问题是我不能把面板的所有元素放在同一条线上。看起来跨距行比按钮行略低

#工作区{
位置：绝对位置；
宽度：800px；
高度：80px；
最高：50%；
左：50%；
左边距：-400px；
利润上限：-40px；
溢出：隐藏；
}
#达什{
背景色：红色；
框大小：边框框；
高度：40px；
}
.btn{
利润率：10px 10px 0 10px；
背景色：#333；
颜色：#FFBF00；
边界：无；
字体大小：粗体；
字体大小：10px；
高度：30px；
填充：0；
显示：内联块；
}
#信息2{
利润上限：-20px；
背景色：#333；
颜色：#FFBF00；
边界：无；
字体大小：粗体；
字体大小：10px；
高度：30px；
填充：0；
显示：内联块；
}

随机的
开始
暂停
下一个
0
0

使用

显示：flex改为换行
使用display:inline block
对每个块进行换行

同时使用
页边距顶部：10px改为
#info2
页边距顶部：-20px


#工作区{
位置：绝对位置；
宽度：800px；
高度：80px；
最高：50%；
左：50%；
左边距：-400px；
利润上限：-40px；
溢出：隐藏；
}
#达什{
背景色：红色；
框大小：边框框；
高度：40px；
显示器：flex；
}
.btn{
利润率：10px 10px 0 10px；
背景色：#333；
颜色：#FFBF00；
边界：无；
字体大小：粗体；
字体大小：10px；
高度：30px；
填充：0；
}
#信息2{
利润率：10px 10px 0 10px；
背景色：#333；
颜色：#FFBF00；
边界：无；
字体大小：粗体；
字体大小：10px；
高度：30px；
填充：0；
}

随机的
开始
暂停
下一个
0
0
使用
显示：flex改为换行
使用display:inline block
对每个块进行换行

同时使用
页边距顶部：10px改为
#info2
页边距顶部：-20px


#工作区{
位置：绝对位置；
宽度：800px；
高度：80px；
最高：50%；
左：50%；
左边距：-400px；
利润上限：-40px；
溢出：隐藏；
}
#达什{
背景色：红色；
框大小：边框框；
高度：40px；
显示器：flex；
}
.btn{
利润率：10px 10px 0 10px；
背景色：#333；
颜色：#FFBF00；
边界：无；
字体大小：粗体；
字体大小：10px；
高度：30px；
填充：0；
}
#信息2{
利润率：10px 10px 0 10px；
背景色：#333；
颜色：#FFBF00；
边界：无；
字体大小：粗体；
字体大小：10px；
高度：30px；
填充：0；
}

随机的
开始
暂停
下一个
0
0
您可以使用Flex box布局方法，以便容器中的所有元素都在同一行中。这里的容器是dahsb，itmes是其中的所有btn和跨度

#dashb{
    display:flex;
 }

您可以使用Flex box布局方法，以便容器中的所有元素位于同一行中。这里的容器是dahsb，itmes是其中的所有btn和跨度

#dashb{
    display:flex;
 }

如果你想对菜单中的所有内容使用“.btn”类，那么添加
行高
等于其中元素的高度30px，在这种情况下，将它们放在一行中添加
垂直对齐：顶部将它们与父容器顶部对齐

.btn {
  margin: 10px 10px 0 10px;
  background-color: #333;
  color: #FFBF00;
  border: none;
  font-weight: bold;
  font-size: 10px;
  height: 30px;
  padding: 0;
  display: inline-block;

  vertical-align: top;
  line-height: 30px;
}


.btn{
利润率：10px 10px 0 10px；
背景色：#333；
颜色：#FFBF00；
边界：无；
字体大小：粗体；
字体大小：10px；
高度：30px；
填充：0；
显示：内联块；
垂直对齐：顶部；
线高：30px；
}
#工作空间{
位置：绝对位置；
宽度：800px；
高度：80px；
最高：50%；
左：50%；
左边距：-400px；
利润上限：-40px；
溢出：隐藏；
}
#达什{
背景颜色：耐火砖；
框大小：边框框；
高度：40px；
}

随机的
开始
暂停
下一个
0
0
如果您想对菜单中的所有内容使用“.btn”类，则添加
行高
，该行高度等于其中元素的高度30px，并使其在一行中添加
垂直对齐：顶部将它们与父容器顶部对齐

.btn {
  margin: 10px 10px 0 10px;
  background-color: #333;
  color: #FFBF00;
  border: none;
  font-weight: bold;
  font-size: 10px;
  height: 30px;
  padding: 0;
  display: inline-block;

  vertical-align: top;
  line-height: 30px;
}


.btn{
利润率：10px 10px 0 10px；
背景色：#333；
颜色：#FFBF00；
边界：无；
字体大小：粗体；
字体大小：10px；
高度：30px；
填充：0；
显示：内联块；
垂直对齐：顶部；
线高：30px；
}
#工作空间{
位置：绝对位置；
宽度：800px；
高度：80px；
最高：50%；
左：50%；
左边距：-400px；
利润上限：-40px；
溢出：隐藏；
}
#达什{
背景颜色：耐火砖；
框大小：边框框；
高度：40px；
}

随机的
开始
暂停
下一个
0
0