Streaming live at 10am (PST)

Uniform alignment blocks in width


#1

Hi, whether it is possible to make uniform alignment blocks in width like here?
i tried use text-align: justify for inline-blocks, but it did not work.
Thanks.


#2

They made it with list elements with inline-block, and the last li element has an extra class with these properties:

ul li.helper {
  width: 100%;
  height: 0px;
  visibility: hidden;
  overflow: hidden;
}

The last element acts like a hidden ruler. I don't know if it would work with divs... try it smile Only width:100% makes the 5 other li have an even separation. The other properties are to mask the ruler element.


#3

It's a neat trick I didn't know about smile

There's a new element called Flexbox that does exactly that without hack. Not yet in Webflow though.


#4

Thanks. Unfortunately with divs this method does not work pensive


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.