0

Стоят рядом 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>

4
  • Приложите код к вопросу. Кнопка "править"
    – h4cktivist
    7 апр 2020 в 3:57
  • Приложил. Получается, если в #phone a не писать "absolute", то текст нормально идёт по горизонтальной линии, но переместить я его не могу, он немного не посередине располагается. А вот когда дописываю "absolute" то часть номера телефона переносится на следующую строку. 7 апр 2020 в 4:02
  • 2
    Попробуйте задать position: relative; и задать значение в пикселях, то есть top: .., bottom:.. и т.д
    – h4cktivist
    7 апр 2020 в 4:13
  • Да, поменял там где текст на relative и нормально поставилось. 7 апр 2020 в 4:15

1 ответ 1

3

У Вас в значениях для позиционирования 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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.