Html 如何将我的所有元素水平排列并使用引导程序响应？

这是我的代码，它将元素按垂直顺序一个接一个地排列。我也尝试过使用网格系统，但在小屏幕上使用时失败了

我用边距和填充物来表示间距，间距没有响应性。怎么做

请帮助我正确的代码，将所有元素放在一行中，并响应所有屏幕

代码：

---

您可以使用

内联块

显示属性将它们全部放在一行中：

#DockedPlayer img,#DockedPlayer text{
    display: inline-block;
}

要使此响应迅速，您可以使用CSS

媒体查询

（在

CSS

文件末尾添加这些查询）：

---

使设计具有响应性是一件棘手的事情，而以上只是一个起点。

要确保您作为直接子元素放置在

#dockdplayer

中的任何元素都显示在一行上，请使用以下通配符子选择器（父元素后跟大于符号和

*

）：

小提琴：

或者，您可以通过以下操作确保当前图元显示在一行上：

#DockedPlayer > text, #DockedPlayer > img {
    display: inline-block;
} 

编辑：用于响应。视口达到一定宽度后，只需将元素显示为块：

@media (max-width: 767px) {
  #DockedPlayer > * {
    display: block;
  }
}

---

更新的小提琴：

好的，谢谢@Trix，但它没有响应。排成一行，但它应该适合所有屏幕。我使用了填充和边距，这是一个问题。等待。。。谢谢如果你需要50%的宽度，那么你真的应该把它们放在你的标记中，而不是一行一行地放

@media screen and (max-width: 600px){
    #DockedPlayer img,#DockedPlayer text{
         width: 100%;
    }
}
@media screen and (min-width: 601px) and (max-width: 900px){
    #DockedPlayer img,#DockedPlayer text{
         width: 48%;
         margin: 0;
         padding: 0;
    }
}

#DockedPlayer > * {
    display: inline-block;
}

#DockedPlayer > text, #DockedPlayer > img {
    display: inline-block;
} 

@media (max-width: 767px) {
  #DockedPlayer > * {
    display: block;
  }
}