logo标签列表

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

htmlcssdisplay
3

我有两个 div 元素的问题。如下面的屏幕截图所示，我想把 PM 和 8 放在同一行，这样它看起来像 8 PM。

enter image description here

我查看了其他解决方案，并尝试将 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>

我可以得到一些帮助吗？

3
为什么要把 PM 的 div 放在 8 的 div 前面才能显示“晚上 8 点钟”？ - Marvin
当您尝试使用 display: inline 时，它会显示什么？ - Marvin
1
这个回答解决了你的问题吗？同一行上有两个div块 - Kundan
8个回答
0
1）从选择器中删除:。 2）在font-size中缺少f。
现在可以使用inline或inline-block：
方法1：像这样使用inline： 

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

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

.hour {
    font-size: 10px;
    display:inline;
}
<div class="time">
    <div class="hour">8</div>
    <div class="period">PM</div>
</div>

方法二：使用inline-block，如下所示：

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

.period{
    font-size: 10px;
    display:inline-block;
}

.hour {
    font-size: 10px;
    display:inline-block;
}
<div class="time">
  <div class="hour">8</div>
  <div class="period">PM</div>
</div>

0

你可以使用flexbox，并将其设置为行（或在你的情况下是row-reverse，因为它们是反向的）

.flexcontainer {
   display: flex;
   flex-direction: row-reverse;
   width:40px;
   height: 40px;
   font-size: 10px;
}
<div class="flexcontainer">
<div>PM</div>
<div>8</div>
</div>

0
  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>

0

将您的.time div显示设置为网格，并设置您想要的网格列数，就像这样：

    .time{
      height: 40px;
      width: 40px;
      display : grid ;
      grid-template-columns: auto auto;
    }
    .period{
      font-size: 10px;
    }
    .hour{
      font-size: 10px;
    }
 <div class="time">
      <div class="hour">8</div>
      <div class="period">PM</div>
    </div>

0

只需从您的CSS代码中删除:即可。

HTML

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

CSS

.time {
  padding: 15px;
  display: inline-flex;
  box-shadow: 0px 0px 10px #3279e3;
}

.period {
  font-size: 10px;
}

.hour {
  ont-size: 10px;
}
0

你可以通过一个单独的 div 轻松处理这个问题。

<div>
<p>8<span>PM</span></p>
</div>
0
请在以下代码中的.period和.hour类中添加float: left css属性。
.period {
  font-size: 10px;
  float: left;
}

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

为了方便和减少代码行数，您可以仅定义一次css属性，如下所示，适用于两个类，因为两个类的属性相同。
.period, .hour {
  font-size: 10px;
  float: left;
}
-1
这是一个非常简短的解决方案： 

.time {
  display: flex;
  flex-direction: row;
  height: 40px;
  width: 40px;
}

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

.hour: {
  ont-size: 10px;
}
<div class="time">
  <div class="hour">8</div>
  <div class="period">PM</div>
</div>

希望这能有所帮助。最好的问候。

我建议您在CSS中加入解释并修复OP也有的拼写错误。 - Marvin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接