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
Related
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;
}
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.
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/
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.
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%;
}