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

Question

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

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;}

Answer 1

Замени 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>

Answer 2

Непонятно зачем вы сделали плюсы на 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>

БЛОГ НА HUSL

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

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