How to Wrap to elements using css

[artlessink]

How would I wrap to elements using css.

For example, lets say I have a ul with 9 list items

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

How would I wrap li 6,7, and 8 using css, so they appear on the same line?

[Paulie_D]

If by ‘wrap’ you mean “enclose in another element”…you can’t do that with CSS.

You can change the layout though for specific list items…

http://codepen.io/Paulie-D/pen/LGxzPY

Frankly, I can’t think of a use case for this…are you trying to do some kind of submenu? If so, you’re going about it the wrong way.

[artlessink]

Yes that’s exactly correct. I’m looking at making un ordered list items equidistant.

[Paulie_D]

I’m looking at making unordered list items equidistant.

Sorry that’s not very clear and I’m struggling to see the relevance to your original request.

Are you saying that 7 & 8 will be submenu items to 6?

Do you have an image of what it is you are trying to do?

[artlessink]

No they will be forma elements in fact we can make them all p tags. I’m not certain what type of container would be best but my goal is to make them all equadistant. So the element 1 will stretch the full lenght allowed and will be equal in lenght to 6,7,8, eqully spaced.

[Paulie_D]

Really need to see an image of what your trying to do here.

[Paulie_D]

Of course flexbox can do this..

http://codepen.io/Paulie-D/pen/QydQXo

But you could probably do the same thing with floats…

[srisri]

You can use the below code:
li:nth-child(6) a, li:nth-child(7) a {
float: left;
}

[Paulie_D]

Which is what I said…

But you could probably do the same thing with floats…

[artlessink]

Awesome these are both great answers. Flex-box is amazing. just not enough support for it before IE 10. How would I use floats to make the elements equidistant?

[Paulie_D]

Depends on what you mean by equidistant…I’ve generally interpreted that to me “the same size” but that’s not what it actually means of course.

Are you suggesting that these might be different sizes?…that would be harder…probably.

To be honest…it would really help if we knew what this was supposed to look like…do you have a design image we could look at?

[artlessink]

http://codepen.io/artlessink/pen/LGyqvE

I’ve uploaded an example here.
I’m using floats here but there not equidistant.
The form elements do not start and end at the same point.

[Paulie_D]

OK….I’m going to ask the obvious question here.

Why are all the elements in the same container?

Why not break this up into logical rows? It would be much easier…

[artlessink]

What would be the best way to do so,

[Paulie_D]

If you need elements in a row, create a div to hold them….it’s basic layout.

[Author]

Posts