css - 当兄弟有多行时，防止弹性项目拉伸

Question

我有一个 HTML 列表，每个列表项上都有一个 span 标签，当列表中的文本换行到下一行时，它会延伸。我已经看到建议的答案，align-items:flex-start但它似乎不起作用。

<ul>
  <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit tempor incidi</a><span></span></li>
  <li><a href="#">Lorem ipsum dolor sit amet, consectetur</a><span></span></li>
</ul>

ul {
  background: black;
  width: 300px;
  padding: 20px;
}

ul a {
  color: white;
  text-decoration: none;
}
ul li {
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid white;
  padding: 10px 0;
}
ul li span {
  order: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  display: block;
  margin-left: auto;
 
}

https://codepen.io/jomsky/pen/KKqJvZG

标签： cssflexbox