КодSEOБлогИное

Адаптивный список ссылок в одну строку

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

Меню состоит из нескольких пунктов. Самый первый и самый большой ведёт на страницу рубрики. Остальные — на страницы подрубрик. Под меню можно разместить список с последними статьями из рубрики.

На Главной странице может быть несколько таких меню.

Когда подрубрики не помещаются в одну строку, то они поочерёдно переходят на следующую

Красота Волосы Лицо Макияж Тело Косметология Диеты Фитнес 
<style>
.raz {
  margin: 1em 0;
  word-spacing: 1em;
}
.raz a {
  text-decoration: none;
}
.raz a:first-child {
  font-size: 200%;
}
</style>

<div class="raz">
  <a href="#">Красота</a>
  <a href="#">Волосы</a>
  <a href="#">Лицо</a>
  <a href="#">Макияж</a>
  <a href="#">Тело</a>
  <a href="#">Косметология</a>
  <a href="#">Диеты</a>
  <a href="#">Фитнес</a>
</div>

Когда подрубрики не помещаются в одну строку, то они все переходят на следующую

Красота Волосы Лицо Макияж Тело Косметология Диеты Фитнес 
<style>
.raz a {
  text-decoration: none;
  vertical-align: middle;
}
.raz > a {
  display: inline-block;
  padding: .5em 0;
  font-size: 2em;
}
.raz span {
  display: inline-block;
  padding: 0 1em 1em;
  word-spacing: 1em;
}
</style>

<div class="raz">
  <a href="#">Красота</a>
    <span>
      <a href="#">Волосы</a>
      <a href="#">Лицо</a>
      <a href="#">Макияж</a>
      <a href="#">Тело</a>
      <a href="#">Косметология</a>
      <a href="#">Диеты</a>
      <a href="#">Фитнес</a>
    </span>
</div>
КрасотаВолосыЛицоМакияжТелоКосметологияДиетыФитнес
<style>
.raz {
  padding: 0 .4em;
  line-height: 1em;
  box-sizing: border-box;
  background-image: linear-gradient(transparent 1.5em, currentColor 1.5em, currentColor calc(1.5em + 1px), transparent calc(1.5em + 1px));
}
.raz a {
  text-decoration: none;
  vertical-align: middle;
  background: #fff;
}
.raz > a {
  display: inline-block;
  margin: .5em .2em;  /* .4em / 2 = .2em, поскольку font-size: 2em; */
  padding: 0 .15em;  /* .3em / 2 = .15em, поскольку font-size: 2em; */
  font-size: 2em;
}
.raz span {
  display: inline-block;
  padding-bottom: 1em;
}
.raz span a {
  display: inline-block;  /* текстовые ссылки, неразделённые пробелом, смещаются вниз при переполнении */
  margin: 0 .4em;
  padding: 0 .3em;
}
</style>

<div class="raz"><a href="#">Красота</a><span><a href="#">Волосы</a><a href="#">Лицо</a><a href="#">Макияж</a><a href="#">Тело</a><a href="#">Косметология</a><a href="#">Диеты</a><a href="#">Фитнес</a></span></div>
◄▲►
Все комментарии