Поместите два деления в одну строку с CSS - PullRequest
Новая
       5

Поместите два деления в одну строку с CSS

3 голосов
/ 21 января 2020

У меня проблема с двумя 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>

Могу ли я получить помощь?

Ответы [ 8 ]

0 голосов
/ 21 января 2020

установите для вашего дисплея .time div значение grid и укажите желаемый номер столбца grid: 

    .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 голосов
/ 21 января 2020

Добавьте свойство 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;
}
0 голосов
/ 21 января 2020

Вот очень короткое решение: 

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

Надеюсь, это поможет. С наилучшими пожеланиями.

0 голосов
/ 21 января 2020

Просто вы можете справиться с этим одним делом. 

<div>
<p>8<span>PM</span></p>
</div>
0 голосов
/ 21 января 2020

Просто удалите : из вашего 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 голосов
/ 21 января 2020
  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 голосов
/ 21 января 2020

вы можете использовать flexbox и установить его в ряд (или, в вашем случае, в обратный ряд, так как у вас они задом наперед) 

.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 голосов
/ 21 января 2020

1) Удалить : из селекторов

2) Вам не хватает f в font-size

Теперь используйте с 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>

Метод 2: используйте 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>
...