Podemos mostrar una lista en formato de n columnas de dos maneras:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
How to display a list in
n columns format?
</title>
<!--CSS Code-->
<style media="screen">
body{
background: orange;
overflow: hidden;
}
h1 {
text-align: center;
color: green;
}
ol{
/* As width is 10 so it
will create 3 columns */
width: 30em;
/* Removes any style
in list */
list-style: none;
color: white;
position: absolute;
}
ol li{
/* Makes the list to
float left */
float: left;
/* Size of one list item */
width: 10em;
}
br {
clear: left;
}
/* Creates gap between
two two columns */
div.wrapper {
margin-bottom: 1em;
}
</style>
</head>
<body>
<!-- HTML Code -->
<h1>Geeks For Geeks</h1>
<center>
<div class="wrapper">
<ol>
<li>Geek 1</li>
<li>Geek 2</li>
<li>Geek 3</li>
<li>Geek 4</li>
<li>Geek 5</li>
<li>Geek 6</li>
<li>Geek 7</li>
<li>Geek 8</li>
<li>Geek 9</li>
<li>Geek 10</li>
<li>Geek 11</li>
<li>Geek 12</li>
</ol>
</div>
</center>
</body>
</html>
Producción:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
How to display a list in
n columns format?
</title>
<!--CSS Code-->
<style media="screen">
body{
background: dodgerblue;
overflow: hidden;
}
h1 {
text-align: center;
color: green;
}
/* Here value of column-count can
be any positive integer value */
ol.no_1{
/* Divides into 4 columns */
column-count: 4;
/* Removes any style in list */
list-style: none;
height: 300px;
left:15%;
color: white;
position: absolute;
}
ol.no_2{
/* Divides into 6 columns */
column-count: 6;
/* Removes any style in list */
list-style: none;
height: 300px;
top:35%;
left:5%;
color: white;
position: absolute;
}
ol li{
/* It is the necessary statement
as it makes it compactile
with the height of ol */
display: inline-block;
}
</style>
</head>
<body>
<!-- HTML Code -->
<h1>Geeks For Geeks</h1>
<div class="wrapper">
<!-- Class with n=4 -->
<ol class="no_1">
<li>Geek 1</li>
<li>Geek 2</li>
<li>Geek 3</li>
<li>Geek 4</li>
<li>Geek 5</li>
<li>Geek 6</li>
<li>Geek 7</li>
<li>Geek 8</li>
<li>Geek 9</li>
<li>Geek 10</li>
<li>Geek 11</li>
<li>Geek 12</li>
</ol>
<!-- Class with n=6 -->
<ol class="no_2">
<li>Geek 1</li>
<li>Geek 2</li>
<li>Geek 3</li>
<li>Geek 4</li>
<li>Geek 5</li>
<li>Geek 6</li>
<li>Geek 7</li>
<li>Geek 8</li>
<li>Geek 9</li>
<li>Geek 10</li>
<li>Geek 11</li>
<li>Geek 12</li>
</ol>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA