Горизонтально растущие списки, разделители между элементами, без маркеров перед элементами, без вертикального выравнивания. Как? - PullRequest
Новая
       164

Горизонтально растущие списки, разделители между элементами, без маркеров перед элементами, без вертикального выравнивания. Как?

0 голосов
/ 07 августа 2020

Если вы проверите поле навигации в нижней части статьи Википедии (здесь пример ), вы заметите, что они делают что-то особенное со своими списками:

  1. Списки растут по горизонтали, но переносятся по вертикали при достижении конца содержащего их элемента.
  2. маркеры go между элементами, а не перед элементами.
  3. Элементы списков не помещаются в столбцы (их не нужно выравнивать по вертикали).

Мне нравится, как выглядят эти списки, но мне сложно найти способы их точной репликации . Я могу найти аналогичные решения, чтобы помещать элементы списка в столбцы или просто иметь горизонтальный рост без разделителей между элементами . Я использовал инспектор кода своего браузера, чтобы взглянуть на html для навигации Википедии, но таблицы стилей немного сумасшедшие.

1 Ответ

0 голосов
/ 07 августа 2020

Мне удалось выкопать таблицу стилей для hlist класса здесь . Работает как шарм. Приведу пример. Благодарим пользователя wiki Edokter за создание этого стиля. 

header, footer {
  text-align: center;
}

/*Grow horizontally, don't put bullet marks.*/
ul.hlist li {
  display: inline;
}

/* Put a bullet after every element.*/
ul.hlist li:after {
  content: " • "
}

/*Unless it's the last element.  Then put nothing.*/
ul.hlist li:last-child:after {
  content: none;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <header>
  <h1>
  Full Name
  </h1>
  <ul class="hlist">
    <li>
    email@address.com
    </li>
    <li>
    123-456-7890
    </li>
    <li>
    personal-website.com
    </li>
  </ul>
  </header>
  <p>
  Pretend this is lorem ipsum.
  Just a ton of lorem ipsum.
  Going on for several lines.
  Just total nonsense.
  Nonsense a million times.
  Not meant to be read at all.
  Just a bunch of vaguely Latin sounds
  all garbled together.
  </p>
  <footer>
  <ul class="hlist">
    <li>
      Pretend
    </li>
    <li>
      These
    </li>
    <li>
      Are
    </li>
    <li>
      Nav
    </li>
    <li>
      Options
    </li>
    <li>
      Or Something
    </li>
  </ul>
  </footer>
  </body>
</html>
...