Javascript 如何使用CSS将HTML元素干净地放在同一行上

我的问题是如何清晰地将两个元素放在同一行上

这是我的小提琴：

CSS:

包装器：

    <div class="inline-block">
    </div>

在小提琴中，你可以看到一个文本，下面有一个按钮，但我需要它们左对齐和右对齐，如下所示：

文本按钮

现在使用内联块有帮助，但我需要每个元素都是内联的，之后的行也是内联的，这样就可以合并到现有的第一行中，如下所示：

文本按钮文本按钮

---

有没有关于如何正确执行此操作的想法？

只需将此代码添加到CSS中即可

.inline-block > p {
  float: left;
}

---

使用<代码>浮动：左用于

p

内部

内联块

：

.inline块{
显示：内联块；
宽度：100%；
}
.内联块p{
浮动：左；
}

报警
警报喇叭：

关
在…上
报警灯：

关
在…上
过错
启动故障时间：
100
秒

只需使用此选项修改css即可

.inline块{
显示：内联块；
}
p{
显示：内联块；
}
挑选{
显示：内联块；
}

报警
警报喇叭：

关
在…上
报警灯：

关
在…上
过错
启动故障时间：
100
秒

您可以将CSS指定为：

.inline-block { /* select the class */
display: inline-block;
}

.inline-block *{ /* select all the child element  */
 display: inline-block;
}

---

向类中添加任何元素都将在一行中对齐。

将文本放入

，这些是块级元素。使用

报警喇叭：

这也是一个很好的观点，谢谢你漂亮干净，我喜欢它的宽度，因为它可以进入下一行。谢谢，一般来说，像这样改变

p

可能是个坏主意。我刚刚向他展示了如何实现他的目标，他可以将

id

添加到

p

并在css中使用。

.inline-block { /* select the class */
display: inline-block;
}

.inline-block *{ /* select all the child element  */
 display: inline-block;
}