CSS - только обратный (не) упорядоченный список - PullRequest
Новая
       32

CSS - только обратный (не) упорядоченный список

1 голос
/ 17 июня 2020

Плагин Я использую ссылки / описания вывода как элементы списка. Если возможно, я хотел бы изменить порядок (чтобы первый li появлялся на странице последним), но также чтобы они отображались в двух столбцах в стиле каменной кладки (против сетки)?

Существующий код, который у меня есть, : 

.post-entry #linkcat-0 ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em; }

.post-entry #linkcat-0 ul li {
display: inline-block;
margin: 0;
border: 0;
padding: 10px 0;
border-bottom: 1px dotted #999; }

.post-entry #linkcat-0 ul li:last-child {
border-bottom: 0; }

Flex был представлен после того, как я перестал заниматься, так что я не могу заставить их работать вместе. Если бы кто-нибудь мог предложить какое-либо понимание, это было бы очень признательно.

В действии: https://jsfiddle.net/z97xgp4k/

1 Ответ

1 голос
/ 17 июня 2020

Я не уверен, что вы хотели, чтобы это выглядело именно так, но я считаю, что это относительно близко.

Это код, который у меня получился: 

.post-entry #linkcat-0 ul {
    columns: 2;
    transform: rotate(180deg);
} 
.post-entry #linkcat-0 ul li {
  transform: rotate(-180deg);
  margin: 0;
  border: 0;
  padding: 10px 10px;
  border-bottom: 1px dotted #999;
}

Вы можете увидеть, как это выглядит здесь .

Надеюсь, это поможет.

...