Css съезжает текст

Question

Стоят рядом 2 div. В обоих картинка и справа должен быть текст. Все они на одной горизонтальной линии. Но текст который для второй картинки смещается под нее, будто он в строку не влезает, типо там конец блока, и он не может поместиться на ту же строку. Но вроде бы там нет никакого конца блока...

#mail {
  position: absolute;
  left: 340;
  top: 12;
}

#mail a {
  position: absolute;
  top: 3;
  left: 31;
  text-decoration: none;
}

#phone {
  position: absolute;
  left: 500;
  top: 12;
}

#phone a {
  position: absolute;
  left: 31;
  top: 3;
  text-decoration: none;
}

<div id="mail">
  <img src="images/image1-460x460.png" width="23" height="" align="left" />
  <a href="#" style="font-size:16px; color:#bbbbbb;">[email protected]</a>
</div>

<div id="phone">
  <img src="images/telefono-png-8.png" width="23" height="" align="left" />
  <a href="#" style="font-size:16px; color:#bbbbbb;">(383)111-11-11</a>
</div>

Answer 1

У Вас в значениях для позиционирования top left заданы просто цифры, а нужно значение (в px, %, rem, em, vw, vh, ... ).

#mail {
  position: absolute;
  left: 340px;
  top: 12px;
}

#mail a {
  position: absolute;
  top: 3px;
  left: 31px;
  text-decoration: none;
}

#phone {
  position: absolute;
  left: 500px;
  top: 12px;
}

#phone a {
  position: absolute;
  left: 31px;
  top: 3px;
  text-decoration: none;
}

<div id="mail">
  <img src="https://dummyimage.com/23x23/000/fff" width="23" height="" align="left" />
  <a href="#" style="font-size:16px; color:#bbbbbb;">[email protected]</a>
</div>

<div id="phone">
  <img src="https://dummyimage.com/23x23/000/fff" width="23" height="" align="left" />
  <a href="#" style="font-size:16px; color:#bbbbbb;">(383)111-11-11</a>
</div>

И рекомендую все-таки такую разметку:

.contact,
.contact-item {
  display: flex;
  align-items: center;
}

.contact {
  justify-content: flex-end;
}

.contact-item {
  margin-left: 20px;
}

.contact-item a {
  text-decoration: none;
  font-size:16px;
  color:#bbbbbb;
}

.contact-item img {
  width: 23px;
  height: auto;
  margin-right: 8px;
  
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

a[href*="mailto:"],
a[href*="tel:"] {
  white-space: nowrap;
}

<div class="contact">
  <div id="mail" class="contact-item">
    <img src="https://dummyimage.com/23x23/000/fff" />
    <a href="mailto:[email protected]">[email protected]</a>
  </div>

  <div id="phone" class="contact-item">
    <img src="https://dummyimage.com/23x23/000/fff" />
    <a href="tel:(383)1111111">(383)111-11-11</a>
  </div>
</div>

БЛОГ НА HUSL

Css съезжает текст

Ответы (1 шт):