Две ссылки не выравниваются

Asked by Данияр,
April 9

Followers 1

Question

Данияр

Posted April 9

- Report
- Share

Posted April 9

https://jsfiddle.net/daniars/wzty3xp6/ - ссылка на код
1)Как должно быть

2)На данный момент

Никак не пойму, почему они не ровно стоят

Quote

Link to comment

Share on other sites

1 answer to this question

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

× Pasted as rich text. Paste as plain text instead

Only 75 emoji are allowed.

× Your link has been automatically embedded. Display as a link instead

× Your previous content has been restored. Clear editor

× You cannot paste images directly. Upload or insert images from URL.

Insert image from URL

Followers 1

Go to question listing

Similar Content
- Background не работает
  By stasN1
  
  Мне нужен такой результат :
  
  Не понимаю почему background не применяется вокруг иконок:
  
  Сам код:
  Html:
  css:
  
  Html:
  <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section>
  Css:
  .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!
  
  Уже решил, спасибо!
  У меня CSS селектор вида:
  .finish .finish_wrapper .finish_item .finish_round
  
  А должен быть:
  .finish .finish_wrapper finish_item .finish_round
  Т.е. без точки перед finish_item, так как это не класс, а элемент
- Как сделать кастомный чекбокс?
  By Dos1er
  
  Приветствую!
  Подскажите, плиз, как сделать чекбокс как на скрине?
  Я новичок в верстке и что-то не могу разобраться в кастомизации данной штуки
- Не правильная адаптация на сайте
  By Yurich
  
  Всем привет, у меня такой вот вопрос, делаю сайт через react и при изменении расширения что-то идёт не так и какой-то бред получается, подскажите как решить данную проблему. Я вообще не понимаю из-за чего это происходит, по этому не могу нормально объяснить 😅.
- CSS transition
  By jksnf
  
  Не работает transition при появлений модального окна:
  <a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.
  
  Что делать?

Обсуждения
- Background не работает
  
  By stasN1 · Posted Yesterday at 04:36 PM
  
  Мне нужен такой результат : Не понимаю почему background не применяется вокруг иконок: Сам код: Html: css: Html: <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section> Css: .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо! Уже решил, спасибо! У меня CSS селектор вида:.finish .finish_wrapper .finish_item .finish_roundА должен быть:.finish .finish_wrapper finish_item .finish_roundТ.е. без точки перед finish_item, так как это не класс, а элемент
- Вопрс по макету
  
  By torsar · Posted Yesterday at 02:11 PM
  
  Есть вопрос по макету. (psd) Макет более 80мб. На форуме не выложишь. Где лучче залить файл и выложить ссылку на него? (Гугл диск подойдет?) Может у кого, знающего найдется 10 минут, чтоб ответить на вопрос по верстке?
- Flex и flex-basis
  
  By Switch74 · Posted Yesterday at 11:40 AM
  
  если вы укажите width и height то блоки у вас будут с одним и тем же соотношением сторон с разными flex-direction а flex-bsis изменит соотношение сторон при изменении flex-direction посмотрите примеры тут https://tproger.ru/translations/how-css-flexbox-works/ а еще не всегда требуется указывать height
- Flex и flex-basis
  
  By torsar · Posted Yesterday at 04:46 AM
  
  Я понимаю, а смысел в нем (практическое применение)? Если можно указать width или height?
- Flex и flex-basis
  
  By Switch74 · Posted Yesterday at 03:33 AM
  
  flex-bsis указывает размер блока по главной оси: если row, то это ширина если column, то это высота а width и height всегда ширина и высота соответственно

Sign In

Две ссылки не выравниваются

Question

Данияр

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Igor Schnaider

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information