All geek questions in one place

Center Floating Elements

I currently have the following code ...

<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> <body> <section id="devices"> <h1>Gruppen</h1> <div class="group"> <h2>Gruppe 1</h2> <ul> <li class="device">Schalter 1</li> <li class="device">Schalter 2</li> <li class="device">Schalter 3</li> </ul> </div> <div class="group"> <h2>Gruppe 2</h2> <ul> <li class="device">Schalter 1</li> <li class="device">Schalter 2</li> <li class="device">Schalter 3</li> </ul> </div> </section> </body> </html> 

 * { margin: 0; padding: 0; } ul { list-style-type: none; } #devices { background-color: yellow; } #devices .group { background-color: gray; } #devices .group ul { text-align: center; } #devices .group .device { background-color: green; display: inline-block; margin: 5px; max-width: 200px; width: 100%; }

... which looks like this: enter image description here

But I want the green <li> elements to float in the columns. It should look like this: enter image description here

Please note: the number of green <li> elements is a variable, may be more or less than three elements, and may be more than two columns! I want to order <li> elements "column by column" and center them ...

Thanks for the help: -)

+4
source share
3 answers

What is centered on "Schalter 3", text-align: center; . We can fix this by removing

 #devices .group ul { text-align: center; }

and adding:

 #devices .group ul { margin-left: 50px; } #devices .group li { text-align: center; }

in its place. This centers the text in the li element, rather than centering the li element inside ul. And he adds margin on the left to get the desired indent.

Working script.

+4
source

Rebuild your html so that each “column” is its own container (div), which has a corresponding width. Also, if you hate yourself, use the table.

0
source

Check out this script.

The trick was to return li back to the block level elements so that they could have a width. Then set width: 40%; (40% leaves little space for the 5px field) and float: left; . Also adding overflow: auto; in ul so that it contains his floating li s.

0
source

Source: https://habr.com/ru/post/1443488/

More articles:


All Articles