I'm working on an unordered list. I'm trying to display the content in multiple columns. I've managed to do this with CSS's column-count, however the content is not displayed properly. It seems like the first item of the list is placed on the second position, resulting in a crooked list.
Instead of this output:
A F K
B G L
C H M
D I N
E J O
I get:
E J O
A F K
B G L
C H M
D I N
or, when I have two items to place in two columns, I want:
A B
but I get:
A B
So it seems like the first position is always skipped. I've looked for ways t solve this but couldn't find others with this problem, mostly people have other alignment issues. This is the CSS of the div that contains the ul:
div.partlist {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}
Anyone any thoughts?
I suspect that you are missing a reset on the ul/li to remove the default margin/padding.
div.partlist {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
margin-top: 10px;
border: 1px solid grey;
display: inline-block;
margin: 25px;
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
<div class="partlist">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
Related
Correct LayoutInstead of 3 columns per row (as below), i want to display the first 2 rows with 3 columns and then the 3rd row with 5 columns and 4th row with 4 columns (changing CSS only)
CSS
ul { columns: 3; }
HTML
<ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </ul> </body>
I can't figure out how to change the number of columns per row.
You can use css grid model and change the column number with grid-column. This uses some kind of trick though. To achieve this, we can set the original column to be 60, then we can span the first 6 elements (first and second row) to 20, then we span the 7th to 11th elements to 12, finally we span the rest of the elements to 15.
How did we choose those values? we can basically get the LCM of 3, 4, 5 which is 60, then we can divide 60 to each number of column: 60 / 3 = 20, 60 / 5 = 12, 60 / 4 = 15.
ul {
display: grid;
grid-template-columns: repeat(60, 1fr);
}
li:nth-child(-n+6) {
grid-column: span 20;
}
li:nth-child(n+7):nth-child(-n+11) {
grid-column: span 12;
}
li:nth-child(n+12) {
grid-column: span 15;
}
/* just for styling */
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
li {
text-align: center;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
If you want to make it exactly as your image though, you can just simply use add grid-column: 1 on each of the starting row:
ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
li:nth-child(1), li:nth-child(4), li:nth-child(7), li:nth-child(12) {
grid-column: 1;
}
/* just for styling */
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
li {
text-align: center;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
I got list like below
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
How do make the list arrangement to like this.
1 2 5 6 9 10
3 4 7 8 11 ....etc
or
1 3 5 7 9 11
2 4 6 8 10 .... etc
I need this arrangement because i'm using angular ng-repeat, so i need every number has the same element. I dont mind if you guys give the answer using other element, but every number must have same element. Thanks
p/s: the number will increase when scroll, like infinite scroll.
You can split your content into 2 columns.
ul {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 30%;
-moz-column-gap: 30%;
column-gap: 30%;
width: 100%;
}
li {
display: inline-block;
width: 35%; /* (parent 100% - parent gap 30%) / columns */
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
The solution above works when you have 8 or less li items.
But if the number of items is unknown, you can place a class to figure out the number of columns.
For example, consider you have in your angular model a variable qtItems. You can do something like this:
<ul ng-class = "'col' + Math.ceil(qtItems/4)">
Then use CSS for each class:
ul {
width: 100%;
}
ul li {
display: inline-block;
}
ul.col2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 30%;
-moz-column-gap: 30%;
column-gap: 30%;
}
ul.col2 li {
width: 35%;
}
ul.col3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20%;
-moz-column-gap: 20%;
column-gap: 20%;
}
ul.col3 li {
width: 20%;
}
ul.col4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 10%;
-moz-column-gap: 10%;
column-gap: 10%;
}
ul.col4 li {
width: 15%;
}
Get the number of LI items and divide it by the number of rows and set that value to column-count property.
$(document).ready(function() {
var numitems = $("#myList li").length;
$("ul#myList").css("column-count",Math.round(8/2)); /* number of items / row */
});
ul {
width: 200px;
}
li {
width: 25px; /* 200px / 8 = 25px */
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
You need to set the width of UL, because number of rows will depend on the width also even after setting the column-count. You can set it to 100% too, but then the number of rows will change based on the window size. To restrict the number of rows to 2, fixed width for UL may be required.
Credits to Poornima
With some modifíing I could get along with this. It's not what you wanted, but maybe it will help others in need.
you can take two ul in one ul and you can adjust which you exactly want to see.
HTML
<ul class="mainul">
<li>
<ul class="subul">
<li>1</li>
<li>2</li>
<li>5</li>
<li>6</li>
</ul>
</li>
<li>
<ul class="subul">
<li>3</li>
<li>4</li>
<li>7</li>
<li>8</li>
</ul>
</li>
</ul>
CSS:
.mainul
{
list-style-type:none;
}
.subul
{
list-style-type: none;
}
.subul li
{
display:inline;
}
Let's say we have a html list like this:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
...
<li>10</li>
</ul>
How to, using css and/or java script, make a browser show it like this (in groups of four, with some margin between the groups):
1 2 5 6 9 10
3 4 7 8
Just use column-count, float and width after wrapping the ul in a parent element to which the column-count rule can be applied:
.colWrap {
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;
column-count: 3;
}
li {
float: left;
width: 50%;
}
Adjusted HTML:
<div class="colWrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
JS Fiddle demo.
References:
column-count property.
CSS3 columns compatibility.
you can use css3 column-count property for this:
Write like this:
.colWrap {
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-webkit-column-width:20px;
-moz-column-width:20px;
}
li {
display:inline;
}
div{
width:120px;
}
Check this http://jsfiddle.net/rJTGJ/2/
You can try it by replacing the "ul" with tables, that fits your needs.
SEE DEMO
You only have to customize this demo for you needs with css or different html tags.
JavaScript
$(function(){
$("ul").each(function(){
var oh = "<table><tr>";
for(i=0;i<this.children.length;i++){
oh += "<td>"+this.children[i].innerHTML+"</td>";
if(i%2==1){
oh+="</tr>";
if(i%4==3){
oh+="</table><table><tr>";
} else {
oh+="<tr>";
}
}
}
oh += "</tr></table>";
this.outerHTML = oh;
});
});
EDIT
There is also the possibility of CSS column-count, but this does not work in every browser. See WhenCanIuse. So mine is a fall-back version which should work in much more browsers.
Alternative way using jQuery here .. (live demo)
var ul = $('ul'),
lis = $('ul li');
lis.each(function (index) {
if(index % 4 === 0) {
ul.append($('<ul />'));
}
ul.find('ul').eq(~~(index / 4)).append($(this));
});
And CSS
ul ul {
float: left;
width: 50px;
margin-right: 30px;
}
ul li {
list-style-type: none;
float: left;
width: 50%;
}
use html tables
<table>
<tr>
<td></td>
</tr>
</table>
And change the border characteristics of the table to hide it.
hope this helps.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
I want to show list items as 2 or more columns (dynamic alignment)
Sorry for my English!
I have a problem with ul li:
my HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
my css:
ul {
width:60px;
}
ul li{
float:left;
width:20px;
list-style:none;
}
my list is divided into 3 columns like:
1 2 3
4 5 6
7 8 9
10
So, my question is: how can I sort my list like :
1 4 7 10
2 5 8
3 6 9
Thanks for any help:D
You can use css3 column-count property for this check this for more
I want to show list items as 2 or more columns (dynamic alignment)
See fiddle for code and demo
Fiddle: http://jsfiddle.net/pGHCd/
Demo: http://jsfiddle.net/pGHCd/embedded/result/
ss:
CSS3 to the rescue!
ul {
width:60px; height: 60px;
}
ul li{
float:left;
width:20px;
list-style:none;
}
ul, ul li {
-moz-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);
}
http://jsfiddle.net/rlemon/Y5ZvA/2/
Hi you can do this on css3 properties as like this
Css
ul{
-moz-column-count: 3;
-moz-column-gap: 33%;
-webkit-column-count: 3;
-webkit-column-gap: 33%;
column-count: 4;
column-gap: 33%;
background:green;
width:100px;
}
li{
height:20px;
list-style:none;
}
HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
Live demo http://jsfiddle.net/rohitazad/pMbtk/376/
But is not work IE
How can, This values divided between the three columns with CSS and width: auto; as dynamic?
As this: http://img4up.com/up2/20239064020416631754.gif
Example: http://jsfiddle.net/r3rm9/
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
You can start with the CSS3 Column properties, but support isn't very good at the moment.
http://jsfiddle.net/GolezTrol/r3rm9/4/
This article http://www.alistapart.com/articles/multicolumnlists/ shows several options for creating multi-column lists, worth checking out. Especially if the numbering MUST be from top to bottom instead of left to right / right to left.
Give your <ul> a specific width. And your <li> and float it.
ul {
float: right;
text-align: right;
direction: rtl;
margin: 50px 50px 0 0;
width: 207px;
}
ul li {
list-style-image: url(http://i.stack.imgur.com/so5PA.png);
float: left;
width: 55px;
}
How about this?
http://jsfiddle.net/r3rm9/1/
ul li{
list-style-image:url(http://i.stack.imgur.com/so5PA.png);
float: left;
width: 30%;
}