Похожие чаты

I have style for ul like this: ul {

display: flex;
justify-content: center;
align-items: center:
}

what i want is set first child and last child of ul to left and right. other element center. how can i do that?

23 ответов

28 просмотров

Try: ul li:first-child { justify-self: flex-start; } ul li:last-child { justify-self: flex-end; }

Mr Thieves
not work.

ul must have enough width too ig

Mr-Thieves Автор вопроса
Harsh ◖◔ᴥ◔◗
ul must have enough width too ig

The display: flex property on the parent element prevents justify-self from having an effect. Try setting the display: flex property on the parent to display: grid.

Mr-Thieves Автор вопроса
Mr Thieves
i set it to 100%

ul li:first-child { margin-right: auto; } ul li:last-child { margin-left: auto; }

Mr Thieves
The display: flex property on the parent element p...

One way to do it by ul { display: flex; justify-content: space-between; align-items: center; } With following html <ul> <li>test</li> <li> <span>test</span> <span>test</span> </li> <li>test</li> </ul>

Mr-Thieves Автор вопроса
MUTHU・KUMAR 「メーカー」 🔺
ul li:first-child { margin-right: auto; } ul li...

it has one probelem when i set it in mobile view. items between first and last child become flex-start.

Mr-Thieves Автор вопроса
MUTHU・KUMAR 「メーカー」 🔺
What

items that is not first child and last child has set to be in center. so in desktop view is something like this: X—————-x-x-x-x———————-X but when i switch to mobile view: i want become like this: X——x -xxx——-X not this: X—-x xxxx——-X

Mr-Thieves Автор вопроса

this is my css. plus with your css

Mr Thieves
items that is not first child and last child has s...

Wow uhh, that implies the content in centre is actually different from content on the sides; is that accurate?

Mr-Thieves Автор вопроса
MUTHU・KUMAR 「メーカー」 🔺
Wow uhh, that implies the content in centre is act...

what i want is i want all items excep first child and last child be in center.

Mr Thieves
what i want is i want all items excep first child ...

I think @Harsh_br0's solution above will work better https://t.me/thedevs_design/104459

https://codepen.io/MKRhere/pen/mdvXoOJ

Mr-Thieves Автор вопроса
Mr-Thieves Автор вопроса
MUTHU・KUMAR 「メーカー」 🔺
https://codepen.io/MKRhere/pen/mdvXoOJ

is there any modern html 5 template that i can debug it and learn from it?

Похожие вопросы

Карта сайта