Какие сдалать, что бы текст ссылки был прижат к вверхнему краю, а стрелка находилась по уровню нижней границе строки текста тэга li?

Question

необходимо выставить стрелку и текст ссылки на одном уровне. Не понимаю, как это сделать, стили брал вот с этого сайта https://monogrid.com/en/ (снизу, из Footer), у них текст ссылки прижат (смещен) к верхнему краю блока li, а стрелка расположена по уровню нижней границе текста ссылки. Буду очень признателен, если поможете, сделать аналогично.

P.S. Я не программист и не верстальщик, работаю инженером в больнице, поэтому многого не понимаю, не судите строго.

вот мой код: https://play.tailwindcss.com/9XMHelb3hk?layout=horizontal

Answer 1

Поскольку в место для коммента всё не влезет, то вынесу сюда лишь малую толику того, что в голову приходит по выравниваниям

Почти ничего не понял, но... позвольте сказать, главное что у SVG нет базовой линии. И все ваши попытки подогнать один объект к другому сводятся к выравниванию по вертикали: верх, центр, низ. Исходите из этого и сразу станет проще жить. Тем же flex и его приёмами вы можете выровнять такой вот блок <li><a></a><svg></svg></li>или пойти ещё дальше

ul {
  padding: 0;
}
li {
  list-style-type: none;
  font-family: sans-serif;
  font-size: 32px;
  height: 42px;
  background-color: grey;
}
a {
  text-decoration: none;
  background-color: gold;
  line-height: 26px;
}
svg {
  fill: red;
  width: 18px;
}

li.flex {
  display: flex;
  align-items: flex-end;
}

li.align {
  a {
    display: inline-block;
    vertical-align: bottom;
  }
  svg {
    fill: red;
    width: 18px;
    vertical-align: bottom;
  }
}



li.content {
  a {
    display: inline-block;
    vertical-align: bottom;
  }
  a:after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg>');
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 4px;
}

<ul>
<li class="flex">
  <a href="#">Название</a>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg>
</li>
</ul>

<ul>
<li class="align">
  <a href="#">Название</a>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg>
</li>
</ul>

<ul>
  <li class="align">
    <a href="#">Название<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg></a>
  </li>
</ul>

<ul>
  <li class="content">
    <a href="#">Название</a>
  </li>
</ul>

P.S. И это только на поверхности и типовые подходы. На самом деле можно при желании и умении сделать всё что угодно. Но, если вам интересно как правильно, то, согласно современному подходу к семантике на примере того же меню, SVG принято прятать в content как в моём последнем примере, а там можно манипулировать ещё и при помощи позиционирования, что добавляет возможностей. Впрочем никто не отменял позиционирования и для любого из представленных вариантов выше. Равно как и по изначальной техзадаче выровнять текст по верху, а иконку по нижней части.

И, собствено вот вам один из подправленных вариантов, о котором я сказал в первом же комментарии.

ul {
  padding: 0;
}
li {
  list-style-type: none;
  font-family: sans-serif;
  font-size: 32px;
  height: 42px;
  background-color: grey;
}
a {
  text-decoration: none;
  background-color: gold;
  line-height: 26px;
}
svg {
  fill: red;
  width: 18px;
  padding-bottom: 6px;
  background-color: #eee;
}
li.flex {
  display: flex;
  gap: 8px;
}

<ul>
<li class="flex">
  <a href="#">Название</a>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg>
</li>
</ul>

БЛОГ НА HUSL

Какие сдалать, что бы текст ссылки был прижат к вверхнему краю, а стрелка находилась по уровню нижней границе строки текста тэга li?

Ответы (1 шт):