Presently, I am working with 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>Groups</h1>
<div class="group">
<h2>Group 1</h2>
<ul>
<li class="device">Switch 1</li>
<li class="device">Switch 2</li>
<li class="device">Switch 3</li>
</ul>
</div>
<div class="group">
<h2>Group 2</h2>
<ul>
<li class="device">Switch 1</li>
<li class="device">Switch 2</li>
<li class="device">Switch 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 presents as shown above. However, my goal is to have the green <li> elements float in columns. The desired look is displayed below:
Please keep in mind that the number of green <li> elements can vary and there may be more or fewer than three elements, as well as more than two columns. I aim to arrange the <li> elements "column-wise" and centrally align them...
Thank you for your assistance :-)