Помогите сделать margin
внутри блока.
Есть div
и 5 элементов li
(в одну линию) из которых по два крайних надо поставить ниже, так, чтобы средний элемент остался на месте.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсли подходит вариант с flex, то так:
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
align-items: flex-end;
}
li {
padding: 10px;
background-color: gray;
transform: translateY(100%)
}
li:nth-child(3) {
transform: translateY(0);
align-self: flex-start;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
width: 33.333333%;
height: 3em;
background: linear-gradient(-10deg, blue, red);
}
<ul><li><li><li><li><li></ul>
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul {
overflow: hidden;
outline: 4px dotted green;
}
li {
width: 33.333333%;
height: 3em;
float: left;
background: linear-gradient(-10deg, blue, red);
}
li:last-child {
float: right;
}
<ul><li><li><li><li><li></ul>