The position of the parent element's bounding box in relation to the child element

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!

Answer №2

Do you like this design?

        .news-list {
            max-width: 40%;
            float: right;
        }

        .news-list-item{
            text-align: right;
            margin: 0px 0px 10px 0px;
            padding: 7px 0px 7px 0px;
        }

        .news-list-item a{
            padding: 7px;
            background-color: rgba(57,14,99,1.0);
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

Ways to display and modify chosen and not chosen categories on the product editing page

I have three tables Categories: cat_id ... other ... primary key (cat_id) Product: Product_id ... other ... primary key (Product_id) Product_cat: Product_id foreign key (post.Product_id) cat_id foreign key (Categories.cat ...

What are the essential tools needed to extract, interact, and evaluate information from a webpage?

Just trying to figure out the most effective plan of action and required tools/frameworks for this task: 1. Access webpage 2. Navigate to specific page by clicking buttons and filling in text boxes for search 3-4 Repeat 3. Retrieve HTML from page and s ...

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

I've been working on creating a JavaScript game and am currently tackling the challenge of implementing gravity. One crucial aspect I need to address is creating an infinite loop without causing the browser to crash. Is there a way for me to include a ...

Steps for inserting a video into a new div upon selecting a hyperlink

Looking for a way to link menu elements to corresponding videos in adjacent divs? I have two divs set up - one with the menu list and another right next to it where the videos should be loaded. Forms seem like a potential solution, but I lack expertise i ...

A guide on displaying containers with jQuery and CSS

Looking to create a smiley survey using only Front-End technologies. Once a radio button is selected, the associated content should appear for comments. Currently, I have set up my CSS with display: none. I attempted to implement this functionality using ...

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

Placing text at the bottom of a backdrop image

Looking for a way to position text at the bottom of a background image? Here's how you can do it: <div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px"> ...

Issue with Bootstrap 4 navbar functionality on smaller screens

I'm currently in the process of integrating a navbar that transforms the navbar choices into a dropdown menu on smaller screens (as illustrated in the documentation available here). However, I am encountering an issue where the button responsible for ...

Guide on disabling a hyperlink in a table column under specific conditions using Angular2

I am working with a table that has 4 columns: Name, id, Dept, City. The row data and column data are provided as an array from a typescript file and I am iterating through *ngFor to display the content. Below is a snippet of my code: <tbody> < ...

What is the best way to apply a :visited selector specifically to the most recently visited webpage?

I've noticed that all the pages I've visited on the site have now changed to the color I chose. However, my goal is for only the last page I viewed to be in the color I assigned. Thank you! ...

I am experiencing issues with the detection of mouseover events on an SVG circle

I am currently working on a d3 map with zoom functionality that displays circles representing different cities. However, I am facing an issue where the mouseover event for the circles (which shows tooltips and clicking reveals some lines) seems to only reg ...

Is there a way to resize an SVG coordinate system without altering the font size?

I am currently working on a data visualization project where I need to create an SVG graphic based on a specific data range. It would be ideal to use the viewBox attribute in order to scale the SVG so that the width of the graphic matches the width of the ...

Import the information into a td tag's data-label property

I have implemented a responsive table design that collapses for smaller screens and displays the table header before each cell. body { font-family: "Open Sans", sans-serif; line-height: 1.25; } table { border: 1px solid #ccc; border-collapse: co ...

Adjust the width of the <td> elements that are nested under <th> elements with a specified

I want to define the width of the td elements in the tbody section under a thead element with colspan="2" using specific column widths in %. I need the table to maintain a fixed width without dynamically adjusting based on content. .sample { width: 10 ...

I am encountering an issue with opening a dropdown select option upon clicking in C# while using Selenium

I am encountering an issue while attempting to open the Register page from my account. The UI developer utilized Bootstrap code, and Bootstrap developers have included a JS function on click. However, when I execute this code, an error is thrown: "OpenQA.S ...

Use Angular and JavaScript to fetch HTML from a mySQL database and dynamically render it on a webpage

I'm currently utilizing Angular for the front end and Node for the back end. The data is retrieved from a MySql database where it's manually stored in text format with HTML tags. For example: <ul> <li>item1</li> <li> ...

What could be causing my anchored link to redirect incorrectly?

My navigation bar correctly directs me to the 'work' section, but when I click on ABOUT in the navigation bar, it drops down about 300px above the 'about' h2. I suspect that this issue may be related to positioning and display settings. ...

Unleashing the power of jQuery, utilizing .getJSON and escaping

When I use .getJSON, the response I get is a JSON string with many \" characters. However, the callback function does not fire when the page is launched in Chrome. I have read that this happens because the JSON string is not validated as JSON (even th ...

Why does my Node.js server-hosted site get downloaded as a file by IE9, Opera, and older versions of Safari?

I'm feeling completely stuck. This whole situation just doesn't make any sense to me. Even though I'm new to HTML5, CSS, and Javascript, I've put together what I think is a decent (albeit unfinished) website design and a simple (also u ...