How to layout list items in groups - html

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.

Related

Change list arrangement - HTML & CSS

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;
}

How to proper align after CSS column-count

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>

Seperate 2 logical units on one line in header with css

What I want to do is have two logical navigation units in my header. the one with [1,2,3,4,5] should be on the left side and the one with [6,7,8] on the right.
Right now I have the following HTML code
<div id="firstNav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="secondNav">
<ul>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
and the following CSS
#firstNav ul li{
display: inline-block;
}
#firstNav {
float:left;
}
#secondNav ul li{
display: inline-block;
}
#secondNav {
float:right;
}
My Problem is, that if I dont use the inline-block everything is vertical not horizontal and then I force it to be horizontal afterwards in the individual child <li> item.
Is this an acceptable way of achieving what I want or can somebody give me a better/more elegant solution?

#firstNav, #firstNav ul li, #secondNav ul li {
float:left;
}
#secondNav {
float:right;
}
Looks like that's what you need.

How to make list items of one UL with fixed height be displayed as columns?

For example, i have such a list:
1
2
3
4
5
6
7
8
and i want it to look like
1 5
2 6
3 7
4 8
So, how to make it work without any javascript?
I have such a code:
<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>
And
ul{
height:200px;
}
And i also need the code to be supported by IE8 and IE9
Update:
It seems to me that i got it. It's looking a little bit weird but anyway.
<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>
And CSS
ul{
border:1px solid;
position:relative;
height:100px;
}
li{
height:20px;
}
li:nth-child(4)~li{
left:100px;
top:-80px;
position:relative;
}

what you need is CSS3 column relative attributes, like column-count etc.
I make a example on jsFiddle. I don't know much about this, so I achieve the result by calculate height precisely, but I think you can get it in your own way.
And a reference might be helpful.
HTML code:
<div class="newspaper">
<div class="unit">1</div>
<div class="unit">2</div>
<div class="unit">3</div>
<div class="unit">4</div>
<div class="unit">5</div>
<div class="unit">6</div>
</div>
CSS code:
.newspaper {
-moz-column-count:3;
/* Firefox */
-webkit-column-count:3;
/* Safari and Chrome */
column-count:3;
height: 300px;
}
.unit {
height:50px;
width:100%;
border:1px solid gray;
}
Note: Internet Explorer 9, and earlier versions, does not support the column-count property.

I would use Tables instead of lists

you can do it like
HTML
<ul>
<li class="column1">1</li>
<li class="column1">2</li>
<li class="column1">3</li>
<li class="column1">4</li>
<li class="column1">5</li>
<li class="column2 reset">5</li>
<li class="column2">6</li>
<li class="column2">7</li>
<li class="column2">8</li>
<li class="column2">9</li>
<li class="column3 reset">10</li>
<li class="column3">11</li>
<li class="column3">12</li>
<li class="column3">13</li>
<li class="column3">14</li>
<li class="column3">15</li>
</ul>
And check below css
ul
{
margin: 0 0 1em 2em;
padding: 0;
list-style-type: none;
}
ul li
{
line-height: 1.2em;
margin: 0;
padding: 0;
}
* html ul li
{
position: relative;
}
ul li.column1 { margin-left: 0em; }
ul li.column2 { margin-left: 10em; }
ul li.column3 { margin-left: 20em; }
li.reset
{
margin-top: -6em;
}
ul li a
{
display: block;
width: 7em;
text-decoration: none;
}
ul li a:hover
{
color: #FFF;
background-color: #A52A2A;
}
And check this fiddle:
http://jsfiddle.net/9RcVr/

How can I style ul li in css? [duplicate]

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