3

I have a problem with two div items. As shown in the screenshot below, I want to put PM and 8 in the same line, so it looks like 8 PM.

enter image description here

I checked others solutions and I tried to add display: inline; or display: inline-block; to the parent div, but it does not work.

My Code to render the 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>

Can I get some help?

Abhishek Pakhare
  • 476
  • 1
  • 4
  • 15
kevin
  • 51
  • 6

8 Answers8

0

1) Remove : from selectors

2) You miss f in font-size

Now use from inline or inline-block :

Method1: Use of inline like this :

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

Method2: use inline-block like this :

.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>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
0

you could use flexbox and set it to row (or in your case row-reverse since you have them backwards)

.flexcontainer {
   display: flex;
   flex-direction: row-reverse;
   width:40px;
   height: 40px;
   font-size: 10px;
}
<div class="flexcontainer">
<div>PM</div>
<div>8</div>
</div>
Bryan Dellinger
  • 4,724
  • 7
  • 33
  • 79
0
  1. You have two typos:
    • It is font-size not ont-size.
    • You do not put a colon after CSS selectors
  2. I'm not quite sure why display:inline did not work, but since it did not work
  3. Use <span> instead of <div> like so

.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>
Marvin
  • 853
  • 2
  • 14
  • 38
0

Just remove : from your CSS code.

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;
}
Sakkeer A
  • 1,060
  • 1
  • 16
  • 39
0

Simply you can handle this by a single div.

<div>
<p>8<span>PM</span></p>
</div>
jishnu_vp_1998
  • 215
  • 1
  • 5
0

Add float: left css property to both .period and .hour classes as below.

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

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

For easiness and reducing lines of codes, you can define the css property one time only as below for both classes since the properties of both classes are same.

.period, .hour {
  font-size: 10px;
  float: left;
}
anees ma kader
  • 87
  • 1
  • 1
  • 10
0

set your .time div display to grid and set number of grid-column you want it will be like :

    .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>
Shayan Moghadam
  • 1,860
  • 2
  • 10
  • 19
-1

Here's a really short solution:

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

Hope this helps. Best Regards.

Alberto Perez
  • 2,561
  • 1
  • 14
  • 21