I am currently working with a dropdown menu that I coded using CSS, similar to the one shown at .
My issue is that I have 4 menu items and I want the total width of the parent div to be divided equally among each item, regardless of the resolution.
Currently, I have manually set the width at 200px for each item, but this is not a dynamic solution as it may not display correctly on different resolutions.
Is there a way to achieve this dynamic division of width among the menu items?
If you want to ensure that a specific number of items each occupy an equal amount of space, using percentages is the way to go. For example, if you have four items within a parent container of any width, you can set each item's width to 25%.
To prevent exceeding 100% due to borders or padding/margins, it is recommended to apply box-sizing: border-box; to your divs. This ensures that the widths of the divs are calculated including these additional pixels.
To determine the width of li elements when you are unsure of the total count, try this technique:
li:nth-child(1):nth-last-child(1) {width: 100%;}
li:nth-child(1):nth-last-child(2),
li:nth-child(1):nth-last-child(2)~ li {width: 50%;}
li:nth-child(1):nth-last-child(3),
li:nth-child(1):nth-last-child(3)~ li {width: 33.3333%;}
li:nth-child(1):nth-last-child(4),
li:nth-child(1):nth-last-child(4)~ li {width: 25%;}
li:nth-child(1):nth-last-child(5),
li:nth-child(1):nth-last-child(5)~ li {width: 20%;}
This pattern can be extended for larger numbers too.
I came across this technique on a blog, but unfortunately, I can't recall the source. It truly is a clever method.
It just goes to show how vast the world of CSS is and how much there is to learn!
Looks like John beat me to the punch, but I also opted for percentages since you specified 4 elements. And don't forget to ensure your li items are set to inline-table.
div {
margin: 50px;
width: 100%;
background-color: #f99;
}
ul {
width: 100%;
}
ul li {
height: 50px;
width: 20%;
display: inline-table;
border: 1px solid black;
padding: 10px;
}
I'm working with an accordion menu that has some long content. To make it more user-friendly, I want to add a slide effect when the accordion items are opened. Right now, if you open the first two menu items, the last item's content is cut off a ...
I need to use Javascript to disable a link based on its id. By default, the link is invisible. I will only enable the link when the specific id value comes from the backend. HTML <li id="viewroleId" style="display: none;"> <a href="viewrole" ...
I have a specific style applied to a link: #block-menu-menu-top-menu a.contact-us-link { background-image: url("../images/top-menu-contact.png") no-repeat; background-color: none; height: 28px; text-indent: -9999px; width: 34px; } However, when ...
Having trouble using jQuery to find the actual height of the first image nested within a container. I can access the src attribute but not the height. Any suggestions on how to get the accurate height? Is it necessary to retrieve heights via CSS? Unfortu ...
I am struggling to implement a new feature in my table. Specifically, I want the row to change color (#FFCF8B) when a user selects it. I attempted using #newspaper-b tbody tr.selected td, but it was not successful. #newspaper-b { border-colla ...
My current objective is to write a program that generates a square with dimensions of 200 pixels by 200 pixels. The square should be colored using specific RGB values: red (red value of 255), green (green value of 255), blue (blue value of 255), and magent ...
Every time I try to input data using PHP, it throws an error Cannot POST /test.php. I've been attempting to fix it with no success. Can anyone please help me solve this issue? It's crucial for my project work. Here is my HTML code: <html> ...
I am currently utilizing the Grid component from material-ui in my React 16.13.0 application. My objective is to create a row with three items. The first two items are supposed to occupy only the required space without specifying pixel values. I want the t ...
Excuse any weak code you may come across, as I am a backend developer. This is the current appearance of my form: The alignment of these two buttons in Chrome is not correct The issue only occurs in Chrome, with FireFox and Edge displaying the form as e ...
When viewing a website in Landscape mode, everything looks good. However, switching to Portrait mode displays the message "Screen size not supported." I decided to test this on my desktop browser and discovered that adjusting the initial-scale:1 to initial ...
Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable: https://i.sstatic.net/YN7Iu.png The HTML ...
While creating my website, I encountered a minor issue. Some elements like div or text element are showing lines when hovered over with the mouse, but they disappear once clicked elsewhere. Surprisingly, there is no border defined for them. I am stuck at ...
As a beginner in coding, I'm currently exploring how to incorporate a link into my marquee. My goal is to eliminate any color change or underline animation as well. Do you have any recommendations? .Marquee { color: #da6fe2; background-color: t ...
I am working on a row that looks like this: <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h3 class="card-title ...
I am using Angular to set a background image for my page, but the current loading behavior is not visually appealing as the image loads from top to bottom. I would like to implement a fade-in effect or load the image from a blurry view to enhance the user ...
Previously, the most common method for "removing" text from elements was through text-indent: -9999px, however, it is now recommended to use text-indent: 100%; white-space: nowrap; overflow: hidden; This way, the browser does not need to create a huge 9 ...
Here is my HTML code snippet: <div class="col-md-12 money-radio-container"> <input type="radio" name="optradio" class="money-radio" value="10">10 <span>$</span> <input type="radio" name="optradio" class="money-radio" val ...
Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...
Currently, I am in the process of creating a list of job opportunities to be displayed on a side bar of our careers page. Each job listing should include the job title along with an apply button enclosed within a rounded grey box that allows for some spaci ...
In the world of React components, there exists a card representation within a grid view that adapts based on available screen space; function EngineerCard(engineer: EngineerDetail) { return ( <div className='engineerCard'> <d ...