The background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this?

Here is the HTML code:

<ul class="menu">
<li><a class="menuitem">First</a></li>
<li><a class="menuitem">Secondwithlongertext</a></li>
<li><a class="menuitem">Thirdbitshorter</a></li>
</ul>

And here is the corresponding CSS:

ul li a.menuitem{ 
background-color:#000;
color:#fff;
}

Answer №1

To meet your specific requirements, it is necessary to enclose the text within a <span> tag. You can view a working Demo here.

Below is the HTML code:

<ul class="menu">
  <li><a class="menuitem"><span>First</span></a></li>
  <li><a class="menuitem"><span>Second Item with long text can come here</span></a></li>
  <li><a class="menuitem"><span>Thirdbitshorter</span></a></li>
</ul>

ul { 
    background-color:gold;
    color:#fff;
}
ul li{
    background: #990000;
}
ul li a {
    text-align: right;
}
ul li span{ background:black;}

Answer №2

ul { 
    background-color:#000;
    color:#fff;
    width: 100%;
}
ul li{
    background: #990000;
    width: 50%;
}
ul li a {
    text-align: right;
}

If my interpretation is correct, this solution should meet your needs. I often use contrasting colors for backgrounds to better visualize the layout.

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

Guide on how to retrieve additional data from the API by pressing the "Load More" button

Hello, I am working on a project where I aim to display user data from an API called https://reqres.in/api/users?page=(the page number can be 1,2 or more) and present it in an HTML table using JavaScript with promises. Currently, I have successfully popula ...

Filling out the form will automatically direct you to the text input section

I'm trying to figure out if I can create an input box in HTML that directs the user to a specific HTML file based on the word they enter. For example, if they type "Doctor", it would redirect them to the page doctor.html. This is for a school project ...

Guide to displaying a redirect from a CodeIgniter controller with an ID in PHP

I only have one button, but it needs to trigger two functions. I am trying to save data and redirect to a view with an ID. However, I keep encountering an error in the syntax. Message: Too few arguments to function c_transaksi::tambah_shrinkage(), 0 passed ...

Here's a way to align big text in the center while aligning small text at the bottom

How can I position two text blocks on the same line in HTML, with one text block having a larger font size and vertically aligned in the middle, while the other text block sits lower to create a cohesive design? To better illustrate what I mean, I have cre ...

Storing persistent JSON data in a mobile app built with HTML5 involves utilizing the local storage capabilities of the

I am currently working on a mobile app using PhoneGap that is based on HTML technology. When the app is opened for the first time, my goal is to have it download a zip file that includes a JSON file and media files such as images or audio. Once the zip f ...

jsoup - locate element and delete it along with the element preceding it

In my Android app, I am working on extracting data from a stock market historical prices table. However, there are certain rows in the table that need to be removed for clarity. Specifically, I am trying to remove a row in the third tr. I have managed to r ...

Unique CSS design with an accentuated border

I was experimenting with creating a corner using CSS and managed to achieve something like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></ ...

Discovering indistinguishable "Feeling Fortunate" inquiries

My goal is to create a program on my website that can compare the top search results for different queries. For instance, I want it to recognize that the top search result for "twelve" and "12" is the same, leading to https://en.wikipedia.org/wiki/12_(numb ...

Animating SVG elements using CSS

After learning how to use the <animate> attribute, I successfully created a captivating animation featuring an elastic line. However, I am now determined to transform this into CSS for better control: my goal is to activate the animation only upon ho ...

Guide on updating directory images by uploading a new one directly onto the site

As someone who is new to HTML, I have a question about updating images on my website through an "admin" page. Currently, I have two websites set up - the main site displays an image from the "images" folder, and the second site serves as an admin page. M ...

Could it be questionable XHTML originating from a conventional Haskell library?

Currently, I am working on resolving an issue with a program that generates XHTML in Haskell from UTF-8 text. The program is supposed to turn strings of text into valid XHTML entities, but it seems to be failing in doing so. I have imported Text.XHtml.Tran ...

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

I am working with a mat input field that has two-way data binding using ngModel, and I want to add validation using mat-error and formControl. <mat-form-field [formGroup]="myForm"> <input matInput formControlName="myFormName" autocomplete="off" ...

Stop div from exceeding the page boundaries

Here's my current dilemma: I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I ...

What is the correct way to define the onClick event in a React component?

I have been encountering an issue while trying to implement an onClick event in React using tsx. The flexbox and button are being correctly displayed, but I am facing a problem with the onClick event in vscode. I have tried several ideas from the stack com ...

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

After the modal finishes fading out, I want my form to be submitted and sent to the email file "refreshform.php". However, currently after the modal fades out, the form does not submit or post anything to the PHP file for sending the email. It simply fades ...

Switching an :active class using ReactJS

Currently, I am working on creating an onboarding screen where the user is required to select three or more items. Once the user clicks on an item, a purple overlay should remain visible. For reference, this is what I have in mind: Sharing my code snippe ...

Creating a typewriter animation using Tailwind CSS and Next.js

I am currently working on implementing a typewriter effect that is almost exactly how I want it. However, I am facing an issue with the printing process. Right now, each word gets printed on a new line and falls into place when done printing. What I actual ...

Show HTML code inside a text box

I have a text box that I populate with data from a Json response like this: <div class="gadget-body" style="height:100px"> <label>{{ textData}}</label> </div> Now, the Json response contains HTML code with <p> and < ...

Is there a way to eliminate the gap between two horizontal rule tags?

What causes the space between two <hr> tags to remain? Despite setting the width of the <hr> tags to 49%, there is still a gap between them. How can this space be removed from the <hr> tags? Shown below is the HTML and CSS code: *{mar ...

Increasing the height of nested Bootstrap columns by stretching them out

I am trying to ensure that the first two columns in both the green and violet rows always have the same height. I initially thought of using d-flex align-items-stretch, but it seems like it is not working because those elements are not within the same row ...