I've been mulling over this question for quite some time now, and I finally decided to bring it up. Hopefully, it's straightforward and not something that has been addressed before...
Here's the scenario: I have a list of items with anchor tags nested within them...
<ul class="news">
<li><a href="#">This Link is Longer</a></li>
<li><a href="#">My Links</a></li>
</ul>
just like that.
If you notice, the text inside the first anchor tag is longer than the one below it, in terms of the number of characters.
The issue at hand is that I have set a background-color on my list items, but I want the background color or bounding box for each list item to only be as wide as the anchor tag within it, considering it's a list item (ignoring margins and padding).
The area for my unordered list is specified with a max-width of 40% because it's part of a float nested inside a parent div...
ul.news {
max-width: 40%;
float: right;
}
ul.news li {
text-align: right;
margin: 0px 0px 10px 0px;
background-color: rgba(57,14,99,1.0);
padding: 7px;
}
In essence,
I need the background box to adjust to the length of the largest anchor tag. In this case, the link "My Links" has a purple box around it that should only be as large as "My Links" itself extends (plus 7px padding on each side, naturally). How can I achieve this using CSS - setting the width of the list item relative to its child anchor's size?
Thank you in advance for your assistance!