0

Как сделать так чтобы при уменьшении ширины экрана "плюсики" не сдвигались и были прижаты к правой стороне? введите сюда описание изображения

HTML код:

<div id="obertka">
  <ul id="accordeon">
    <li class="liFooterMobileZagolovok"><span class="ulFooterMobileZagolovok">Выбирайте и покупайте</span><span id="plus">+</span></li>

CSS код:

.liFooterMobileZagolovok {padding: 3% 0 3% 0}

.ulFooterMobileZagolovok {color: #1d1d1f; font-size: 90%;}

#plus {padding: 0 0 0 57%; color: #515154;}
#plus1 {padding: 0 0 0 82%; color: #515154;}
#plus2 {padding: 0 0 0 71%; color: #515154;}
#plus3 {padding: 0 0 0 78%; color: #515154;}
#plus4 {padding: 0 0 0 76%; color: #515154;}
#plus5 {padding: 0 0 0 68%; color: #515154;}
#plus6 {padding: 0 0 0 71%; color: #515154;}
#plus7 {padding: 0 0 0 67%; color: #515154;}

2 ответа 2

3

Непонятно зачем вы сделали плюсы на padding.. Можно проще.

#obertka {
  display: block;
  min-width: 100px;
  width: 300px;
  border: 1px solid #444;
  overflow: hidden;
  resize: horizontal;
}
/* Код выше чисто для демо */

#accordeon {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liFooterMobileZagolovok {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
<div id="obertka">
  <ul id="accordeon">
    <li class="liFooterMobileZagolovok">
      <span class="ulFooterMobileZagolovok">Выбирайте и покупайте</span>
      <span>+</span>
    </li>
    <li class="liFooterMobileZagolovok">
      <span class="ulFooterMobileZagolovok">Сервисы</span>
      <span>+</span>
    </li>
    <li class="liFooterMobileZagolovok">
      <span class="ulFooterMobileZagolovok">Учётные записи</span>
      <span>+</span>
    </li>
    <li class="liFooterMobileZagolovok">
      <span class="ulFooterMobileZagolovok">Apple Store</span>
      <span>+</span>
    </li>
  </ul>
</div>

1
0

Замени padding: 0 0 0 N%; на float: right; или через right: 0;

.liFooterMobileZagolovok{
    padding: 3% 0 3% 0
}

.ulFooterMobileZagolovok{
    color: #1d1d1f;
    font-size: 90%;
}

.pluses{
    color: #515154;
    float: right;
    padding-right: 3%;
}

#accordeon{
    border: 1px solid grey;
    max-width: 300px; /* del */
}
<div id="obertka">
    <ul id="accordeon">
        <li class="liFooterMobileZagolovok">
            <span class="ulFooterMobileZagolovok">Выбирайте и покупайте</span>
            <span class="pluses">+</span>
        </li>
        <li class="liFooterMobileZagolovok">
            <span class="ulFooterMobileZagolovok">Second</span>
            <span class="pluses">+</span>
        </li>
    </ul>
</div>

2
  • Воспроизводите пример автора со своим решением.. В первом случае весь текст будет справа (автору нужны только плюсы), во втором случае вообще ничего не изменится.
    – De.Minov
    9 апр 2020 в 15:30
  • @CbIPoK2513 перепутал немного, исправил, спасибо
    – Vadim
    9 апр 2020 в 15:44

Ваш ответ

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

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