Jak wyświetlić elementy listy jako kolumny?

Question

Jak wyświetlić elementy listy jako kolumny?

Próbuję zbudować mój pierwszy responsywny layout. Chcę wyświetlić elementy listy w linii pionowej, w zależności od szerokości.

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

Jeśli przeglądarka zostanie zmieniona, chcę, aby stała się

1  4  7
2  5
3  6

Czy ktoś może mi pomóc? Próbuję od kilku godzin i nic nie mogę dostać. Próbowałem używać tabel, ale nie mogę tego zrobić w ten sposób.

53

list listview css vertical-alignment

Author: ROMANIA_engineer, 2012-09-08

Source

6 answers

Jeśli spojrzeć na poniższy przykład-używa kolumn o stałej szerokości i myślę, że jest to zachowanie wymagane.

Http://www.vanderlee.com/martijn/demo/column/

Jeśli dolny przykład jest taki sam jak Górny, nie potrzebujesz wtyczki kolumny jQuery.

ul{margin:0; padding:0;}

#native {
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  -o-column-width: 150px;
  -ms-column-width: 150px;
  column-width: 150px;
  
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  -o-column-rule-style: solid;
  -ms-column-rule-style: solid;
  column-rule-style: solid;
}

<div id="native">
  <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>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
  </ul>
</div>

20

Author: SPRBRN,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-30 15:44:43

Dziękuję za ten przykład, SPRBRN. To mi pomogło. I mogę zasugerować mixin, którego użyłem na podstawie kodu podanego powyżej:

//multi-column-list( fixed columns width)
  @mixin multi-column-list($column-width, $column-rule-style) {
  -webkit-column-width: $column-width;
  -moz-column-width: $column-width;
  -o-column-width: $column-width;
  -ms-column-width: $column-width;
  column-width: $column-width;

  -webkit-column-rule-style: $column-rule-style;
  -moz-column-rule-style: $column-rule-style;
  -o-column-rule-style: $column-rule-style;
  -ms-column-rule-style: $column-rule-style;
  column-rule-style: $column-rule-style;
 }

Użycie:

   @include multi-column-list(250px, solid);

5

Author: InaFK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-28 13:10:01

Utwórz listę z dowolną liczbą elementów listy. Następnie dołącz listę do div, ustawiając style = column-width i style = column-gap, aby dopasować informacje w elementach listy. Nie ustawia style=columns. Całkowicie responsywna lista, która dostosowuje się do rozmiaru ekranu. Nie wymaga żadnych wtyczek.

1

Author: Steve Brooker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-03 10:12:48

Możesz to zrobić używając CSS3.

Oto fragment kodu HTML:

<ul id="listitem_ascolun">
	<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>

& oto fragment kodu CSS3:

#listitem_ascolun ul{margin:0;padding:0;list-style:none;}

#listitem_ascolun {
    height: 500px;  
    column-count: 4;
	-webkit-column-count: 4;
	-moz-column-count: 4;
}

#listitem_ascolun li {
    display: inline-block;
}

1

Author: Aminul Islam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-03 10:45:22

Użyj właściwości column-width css jak poniżej

<ul style="column-width:135px">

1

Author: Siddhartha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-08 19:09:27

score 72 · Accepted Answer

Można to zrobić za pomocą CSS3 kolumny dość łatwo. Oto przykład, 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>