2

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.

When text is on one line, the width is fine When the text breaks to a newline, the the <a> tag is wider than the text

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Ashbury
  • 2,160
  • 3
  • 27
  • 52

1 Answers1

1

Try to add this to your CSS. this will prevent the text from going to the next line, and will make it take all the space it needs.

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