Html 使用CSS将两个div放在同一行中

我有两个

div

项目的问题。如下面的屏幕截图所示，我想将

PM

和

8

放在同一行中，因此看起来像

8pm

我检查了其他解决方案，并尝试添加

显示：内联或
显示：内联块
到父div，但它不起作用

呈现Div的我的代码：


。时间：{
高度：40px；
宽度：40；
}
.期间：{
字体大小：10px；
}
.小时：{
字体大小：10px；
}

颗粒物
8.

1） 从选择器中删除
：

2） 在
font size

现在使用from
内联
或
内联块
：

方法1：像这样使用
inline
：


。时间{
高度：40px；
宽度：40；
}
.期间{
字体大小：10px；
显示：内联；
}
.小时{
字体大小：10px；
显示：内联；
}

8.
颗粒物
您可以使用flexbox并将其设置为行（或者在您的情况下，行反转，因为它们是向后的）


.flexcontainer{
显示器：flex；
弯曲方向：行反向；
宽度：40px；
高度：40px；
字体大小：10px；
}

颗粒物
8.

您有两个输入错误：

它是
font size
而不是
ont size
在CSS选择器后面不能放冒号

我不太清楚为什么display:inline不起作用，但因为它不起作用
使用
而不是像这样使用


。时间{
高度：40px；
宽度：40px；
}
.期间{
字体大小：10px；
}
.小时{
字体大小：10px；
}

8.
颗粒物
只需从CSS代码中删除：

HTML

只需一个div就可以处理这个问题

<div>
<p>8<span>PM</span></p>
</div>


晚上8点

将
float:left
css
属性添加到
.period
和
.hour
类中，如下所示

.period {
  font-size: 10px;
  float: left;
}

.hour {
  font-size: 10px;
  float: left;
}

为了方便和减少代码行，您可以为两个类定义一次
css
属性，如下所示，因为两个类的属性相同

.period, .hour {
  font-size: 10px;
  float: left;
}

这里有一个非常简短的解决方案：


。时间{
显示器：flex；
弯曲方向：行；
高度：40px；
宽度：40px；
}
.期间：{
ont尺寸：10px；
}
.小时：{
ont尺寸：10px；
}

8.
颗粒物
将您的
.time
div显示设置为网格，并设置所需的网格列数，如下所示：


。时间{
高度：40px；
宽度：40px；
显示：网格；
网格模板列：自动；
}
.期间{
字体大小：10px；
}
.小时{
字体大小：10px；
}

8.
颗粒物
如果您想显示“8pm”，为什么PM div在8div之前？当您尝试显示
display:inline
时，它会显示什么？这是否回答了您的问题？我建议你做一个解释，修正CSS中OP也有的拼写错误。
.period {
  font-size: 10px;
  float: left;
}

.hour {
  font-size: 10px;
  float: left;
}

.period, .hour {
  font-size: 10px;
  float: left;
}