Menu
I'm trying to build my first responsive layout. I want to display list items in a vertical line, depending on width.
<div style="height:800px;"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> 1 5 2 6 3 7 4
If the browser gets resized, I want it to become
1 4 7 2 5 3 6
Can someone help me? I've been trying for hours and I can't get anything. I've tried using tables but I can't do it like that either.
229
This is the simplest way to do it. CSS only. add width to the ul element. add display:inline-block and width of the new column (should be less than half of the ul width).
The <li> tag defines a list item. The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>). In <ul> and <menu>, the list items will usually be displayed with bullet points. In <ol>, the list items will usually be displayed with numbers or letters.
#display: list-item. The only HTML elements displayed as list-item are the (unsurprisingly) list items <li> but also the definition descriptions <dd> . A list item is rendered with a bullet point (if in an unordered list <ul> ) or with a incremental number (if within an ordered list <ol> ).
This can be done using CSS3 columns quite easily. Here's an example, HTML:
#limheight { height: 300px; /*your fixed height*/ -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; /*3 in those rules is just placeholder -- can be anything*/ } #limheight li { display: inline-block; /*necessary*/ }<ul id = "limheight"> <li><a href="">Glee is awesome 1</a></li> <li><a href="">Glee is awesome 2</a></li> <li><a href="">Glee is awesome 3</a></li> <li><a href="">Glee is awesome 4</a></li> <li><a href="">Glee is awesome 5</a></li> <li><a href="">Glee is awesome 6</a></li> <li><a href="">Glee is awesome 7</a></li> <li><a href="">Glee is awesome 8</a></li> <li><a href="">Glee is awesome 9</a></li> <li><a href="">Glee is awesome 10</a></li> <li><a href="">Glee is awesome 11</a></li> <li><a href="">Glee is awesome 12</a></li> <li><a href="">Glee is awesome 13</a></li> <li><a href="">Glee is awesome 14</a></li> <li><a href="">Glee is awesome 15</a></li> <li><a href="">Glee is awesome 16</a></li> <li><a href="">Glee is awesome 17</a></li> <li><a href="">Glee is awesome 18</a></li> <li><a href="">Glee is awesome 19</a></li> <li><a href="">Glee is awesome 20</a></li> </ul>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
