主页 / 问题 / 1601354
Accepted
Даниил Мосолов
Asked:2024-12-01 20:00:09 +0000 UTC2024-12-01 20:00:09 +0000 UTC

我应该怎么做才能使链接文本压到顶部边缘，并且箭头与 li 标记文本行的底部边框齐平？

  • 772

有必要将箭头和链接文本设置在同一级别。我不明白如何做到这一点，我从这个网站https://monogrid.com/en/ （下面，来自页脚）获取样式，它们将链接文本按下（移位）到 li 的顶部边缘块，并且箭头位于底部链接文本边框的水平。如果您能帮助我做同样的事情，我将非常感激。

PS我不是程序员，也不是布局设计师，我在医院担任工程师，所以我不太了解，不要严格判断。

这是我的代码： https: //play.tai​​lwindcss.com/9XMHelb3hk?layout=horizo​​ntal

在蓝色背景上，它应该是这样，下面是结果

css

1 个回答

  1. Best Answer

    由于评论区无法容纳所有内容，因此我将仅介绍有关对齐的一小部分内容

    我几乎什么都不懂，但是......让我说，最主要的是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>

    PS这只是表面和典型的方法。事实上，只要你有愿望和技能，你就可以做任何你想做的事。但是，如果您对如何正确执行此操作感兴趣，那么，根据使用同一菜单示例的现代语义方法，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>

    • 0

相关问题