Evenly distribute li items, with absolute width

April 3, 20231 Views

In the footer of a responsive website, I need to evenly distribute some li items.

This is what I want to achieve:

enter image description here

And this is what I have:

enter image description here

I would like to avoid setting absolute width for each li, to keep a responsive capability of this part of the website.

What would be the optimal way to proceed?

Post Views: 1

2 comments

Anonymous says:

April 3, 2023 at 10:25 pm
You could try
```
text-align:justify;
```
for your ul element

here is a fiddle

http://jsfiddle.net/89bnF/833/
Log in to Reply
Anonymous says:

April 3, 2023 at 10:25 pm
The effect in your screenshot can be achieved by using a margin:
```
.bottomMenu li {
    margin-right: 24px;
}
```
If you want a nice, justified look and you are not concerned with very old browsers, you can use a flex model:
```
.bottomMenu (
    display: flex;
    justify-content: space-between;
}
```
Log in to Reply