0

Прошу прощения, если мой вопрос покажется глупым. Перепробовала различные свойства, но не могу добиться необходимого эффекта. Сейчас блоки и сам текст внутри по центру, мне же нужно, чтобы и сами блоки и текст внутри был по левому краю. Не могу понять какие свойства конкретно нужно изменить. Пробовала менять justify-content, align-items, flex-direction, но все остается на своих прежних местах совершенно не изменяясь.

И как добиться того, чтобы оба эти блока не выравнивались друг под друга и кнопка "Выбрать" не уезжала вниз, а оставалась сразу под текстом? Привожу код.

HTML:

 <div class="pricing pricing--rabten">
            <div class="pricing__item">

                <h3 class="pricing__title">Тариф</h3>
                <p class="pricing__sentence">тариф</p>

                <ul class="pricing__feature-list">
                    <li class="pricing__feature">контент</li>
                    <li class="pricing__feature">контент</li>

                </ul>

            </div>
            <div class="pricing__item">

                <h3 class="pricing__title">Стоимость</h3>
                <ul class="pricing__feature-list">
                <li class="pricing__feature">Размещение на 6 месяцев</li>
                <li class="pricing__feature">Размещение на 1 год</li>
                <div class="pricing__price">
                    <span class="pricing__anim pricing__anim--1">
                            <span class="pricing__currency">&#8381;</span>12 000
                    </span>
                    <span class="pricing__anim pricing__anim--2">
                            <span class="pricing__period">за год</span>
                    </span> 
                    </ul>
                    <button class="pricing__action">Выбрать</button>
                </div>

            </div>

    </section>
    </div>

CSS:

.pricing {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto 3em;
}

.pricing__item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  text-align: center;
  -webkit-flex: 0 1 330px;
  flex: 0 1 330px;
}

.pricing__feature-list {
  text-align: left;
}

.pricing__action {
  color: inherit;
  border: none;
  background: none;
}

.pricing__action:focus {
  outline: none;
}

1 ответ 1

1

У Вас ошибки в html (div не может лежать в ul, должна быть li, с section не понятно что хотели) + align-items: flex-start;

Чтобы кнопка "выбрать" шла сразу за списком, то у ul.pricing__feature-list нужно обнулить нижний отступ: ul.pricing__feature-list {margin-bottom: 0px; }, а если еще и сдвинуть левее, то кнопке нужно будет добавить отступ слева, примерно, на 40px (столько же, сколько и у ul по-умолчанию ~40px).

Предполагаю, что так:

.pricing {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto 3em;
}

.pricing__item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  text-align: center;
  -webkit-flex: 0 1 330px;
  flex: 0 1 330px;
}

.pricing__feature-list {
  text-align: left;
  margin-bottom: 0px;
}

.pricing__action {
  color: inherit;
  border: none;
  background: none;
  
  margin-left: 35px;
}

.pricing__action:focus {
  outline: none;
}
<div class="pricing pricing--rabten">
   <div class="pricing__item">

     <h3 class="pricing__title">Тариф</h3>
     <p class="pricing__sentence">тариф</p>

     <ul class="pricing__feature-list">
       <li class="pricing__feature">контент</li>
       <li class="pricing__feature">контент</li>
     </ul>
   </div>
   
   <div class="pricing__item">
     <h3 class="pricing__title">Стоимость</h3>
     <ul class="pricing__feature-list">

       <li class="pricing__feature">Размещение на 6 месяцев</li>
       <li class="pricing__feature">Размещение на 1 год</li>

       <li class="pricing__price">
         <span class="pricing__anim pricing__anim--1">
           <span class="pricing__currency">&#8381;</span>
           12 000
         </span>
         <span class="pricing__anim pricing__anim--2">
           <span class="pricing__period">за год</span>
         </span>
       </li>
     </ul>

     <button class="pricing__action">Выбрать</button>
   </div>
</div>

5
  • спасибо большое, все наконец-то встало на свои места ) Хотела еще только уточнить, каким образом сделать, чтобы кнопка "Выбрать" не выравнивалась по нижнему краю бокса?
    – Alla
    Commented 26 окт. 2016 в 13:30
  • подправила ответ.
    – SVE
    Commented 26 окт. 2016 в 13:38
  • Не реагирует на это кнопка, остается на своем месте
    – Alla
    Commented 26 окт. 2016 в 14:24
  • Но у меня в примере среагировала
    – SVE
    Commented 26 окт. 2016 в 14:37
  • Будем экспериментировать ) Спасибо большое за помощь!
    – Alla
    Commented 26 окт. 2016 в 14:53

Ваш ответ

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

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