0

Есть flex контейнер в котором блок div с текстом и абсолютным позиционированием. Не могу понять почему текст в блочном элементе не растягивается на всю ширину, а занимает 2 строки..

Если убираю абсолютное позиционирование или ширину контейнеру увеличиваю до 230px, то текст прекрасно умещается в 1 строку.

Но, как решить проблему не меняя размеры контейнера и сохраняя позиционирование у блока?

.box-right {
  margin-top: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 220px;
}

.code {
  font-size: 14px;
  color: #225AAC;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}

.code div {
  border-bottom: 1px dashed #225AAC;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
<div class="box-right">
  <form class="code">
    <div>I have a promocode</div>
  </form>
</div>

2
  • white-space: nowrap; или width: fit-content; ? Commented 22 дек. 2020 в 19:06
  • не работает, пришлось отказаться от position: absolute; позиционирование сбивает свойство ширины
    – Вася
    Commented 26 дек. 2020 в 19:42

1 ответ 1

0
    .box-right {
    margin-top: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 220px;
  }
  
  .code {
    font-size: 14px;
    color: #225AAC;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
  }
  
  .code div {
    border-bottom: 1px dashed #225AAC;
    cursor: pointer;
    position: absolute;
    left: 50%;
    right: -110px; /*половина ширины блока */
  }

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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