html - 将两个div与CSS放在同一行

Question

我有两个 div 元素的问题。如下图所示，我想把 PM 和 8 放在同一行，所以看起来像 8 PM。

我检查了其他解决方案并尝试添加display: inline; 或 display: inline-block; 到父 div，但它不起作用。

我渲染 Div 的代码:

.time: {
  height: 40px;
  width: 40;
}

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

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

<div class="time">
  <div class="period">PM</div>
  <div class="hour">8</div>
</div>

我能得到一些帮助吗？

Answer 1

1. 你有两个错别字:
   • 是font-size不是ont-size .
   • 不要在 CSS 选择器后加冒号
2. 我不太清楚为什么 display:inline 不起作用，但既然它不起作用
3. 使用<span>而不是 <div>像这样

.time {
  height: 40px;
  width: 40px;
}

.period {
  font-size: 10px;
}

.hour {
  font-size: 10px;
}

<div class="time">
  <span class="hour">8</span>
  <span class="period">PM</span>
</div>