CODEWITHSUNDEEP
htmlcss
Zeihlis
Zeihlis

Reputation: 53

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

Upvotes: 0

Views: 7747

Answers (3)

Bhavesh Parekh
Bhavesh Parekh

Reputation: 212

you can do it like

HTML

<ul>
    <li class="column1"><a href="#">1</a></li>
    <li class="column1"><a href="#">2</a></li>
    <li class="column1"><a href="#">3</a></li>
    <li class="column1"><a href="#">4</a></li>
    <li class="column1"><a href="#">5</a></li>
    <li class="column2 reset"><a href="#">5</a></li>

    <li class="column2"><a href="#">6</a></li>
    <li class="column2"><a href="#">7</a></li>
    <li class="column2"><a href="#">8</a></li>
    <li class="column2"><a href="#">9</a></li>

    <li class="column3 reset"><a href="#">10</a></li>
    <li class="column3"><a href="#">11</a></li>
    <li class="column3"><a href="#">12</a></li>
    <li class="column3"><a href="#">13</a></li>
    <li class="column3"><a href="#">14</a></li>
    <li class="column3"><a href="#">15</a></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/

Upvotes: 0

user3089947
user3089947

Reputation: 11

I would use Tables instead of lists

Upvotes: 1

Merlin
Merlin

Reputation: 125

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.

Upvotes: 2

Related Questions