时间戳

首页 > 解决方案 > 将多行文本右侧的图标与列表项对齐

css - 将多行文本右侧的图标与列表项对齐

问题描述

首先，这里是代码：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: flex;
  max-inline-size: 10rem;
}

ul li .fa:first-of-type {
  margin-right: 1rem;
}

ul li .fa:last-of-type {
  margin-left: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />

<ul>
  <li>
    <i class="fa fa-address-book" aria-hidden="true"></i> Short text
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </li>
  <li>
    <i class="fa fa-address-book" aria-hidden="true"></i> Long text wrapping on multiple lines
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </li>
</ul>

我遇到的问题是多行文本右侧的图标被推到列表项的边缘，而当文本在单行时看起来不错。

我正在使用 flex，因为我希望文本在左边缘垂直对齐，并且需要保持不变。

标签： cssflexbox

解决方案

您可以为列表项设置宽度，但为了使图标与右侧对齐，您应该margin-left: auto;在ul li .fa:last-of-type

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: flex;
  max-inline-size: 10rem;
  position:relative;
  padding-left: 30px;
  
}
span.text{
  display: inline-block;
  /*width:80px;*/
}

ul li .fa:first-of-type {
  margin-right: 1rem;
  position: absolute;
  left: 0;
  top: 0;
}

ul li .fa:last-of-type {
  margin-left: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />

<ul>
  <li>
    <i class="fa fa-address-book" aria-hidden="true"></i> <span class="text">Short text</span>
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </li>
  <li>
    <i class="fa fa-address-book" aria-hidden="true"></i> <span class="text"> Long text wrapping on multiple lines </span>
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </li>
</ul>

有关使用 flex 的更多信息，您应该查看这篇文章https://css-tricks.com/snippets/css/a-guide-to-flexbox/

推荐阅读