制作<a> tag same width as text

Question

I have a menu option with two links. When the line wraps, the <a> tag is wider than the text it contains, making the second '+' link too far away. Can I make the <a> tag just as wide as the text it contains?

<li class="has-submenu">
  <a href="/pages/litigation">Litigation & Dispute Resolution</a>
  <a class="expand-nav" href="#">+</a>
</li>

The <li> is display: flex, the <a>'s are display: inline-block.

Answer 1

尝试将此添加到CSS中。这将阻止文本进入下一行，并使其占用所需的所有空间。

.has-submenu a:nth-child(1){
     white-space:nowrap;
     width:auto;
}