A horizontal navigation bar featuring tabs that adjust their width automatically to ensure a consistent dimension across all

I'm aiming to create a horizontal menu that adjusts its width automatically to 100%.

MY CSS

.horizontal {
  width: 100%;
}

.horizontal ul {
  display: table;
  width: 100%
}

.horizontal li {
  display: table-cell;
}

.horizontal li a {
  height: 30px;
  display: block;
  border: 1px solid #aaa;
  text-align: center;
  padding: 4px;
  margin: 0 2px;
  background: #ccc;
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px;
}

MY HTML

<div class="horizontal">
<ul>
    <li><a href="#">Long Item</a></li>
    <li><a href="#">Short Item</a></li>
    <li><a href="#">Really Long Item</a></li>
    <li><a href="#">Nav Item</a></li>
    <li><a href="#">Some Other Link</a></li>
</ul>
</div>

I'm facing an issue where I want all the "tabs" (a elements) to have the same size while maintaining a width of 100%

Is there a way to achieve this? Any suggestions on how to make it possible? Thank you

csscss-float

Answer №1

Set the width of the li elements as a percentage.

.horizontal ul {
  display: flex;
  justify-content: space-between;
}

.horizontal li {
  flex-basis: 20%; /* Assuming you have 5 items in total */
}

Answer №2

To achieve this effect, simply include the following CSS code:

li{width:400px;}

If there are multiple instances of li on the page, you can either assign them a class, provide a class for the ul, and use:

ul.header > li{width:400px;}

Alternatively, you can just use:

.horizontal > ul > li{width:400px;}

Answer №3

Maybe you're looking for something like this:

.horizontal ul {
  height: 50px;
  padding: 0 80px;
  font-weight: 600;
  line-height: 45px;
  text-transform: capitalize;
  text-align: center;
  background: #333;
}

.horizontal ul li{
  display: inline;
}

.navigation ul li a {
  text-decoration: none;
  color: #eee;
}

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

The div container is not expanding to full width on mobile screens when using Next.js and Tailwind CSS

My goal is to make my div stretch or go full width similar to the table on my page. I have experimented with max-w-full, w-screen, and w-full, but the div is not extending all the way... https://i.stack.imgur.com/8BJnI.png This is the code for my page. ...

htmlcssnext.jstailwind-cssresponsive

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

Looking to enhance my images with hover effects. Currently, all the images are in grayscale and I'd like to change that so that when you hover over an image, it reverts to full color and remains that way until hovered over again. I've noticed so ...

javascripthtmlcss

Having difficulty positioning the dropdown above the other elements in the body

Below, you'll notice that the dropdown menu isn't positioned correctly over other body elements like the timer. I'm utilizing bootstrap for the dropdown and redcountdown js for the timer. https://i.sstatic.net/OO8Jm.png Here is the HTML: & ...

javascripthtmltwitter-bootstrapcss

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...

javascriptcssmedia-queries

Utilizing React JS Styled-Components to Import Images from the Public Directory

I've been attempting to set the image as a background-image from the public folder using styled-components. I've tried the following: import styled from "styled-components"; import Background from 'process.env.PUBLIC_URL + /images/ ...

javascriptcssreactjsstyled-componentsstyling

Radiant Curvature Background Gradient

On my website, I'm trying to replicate the unique background gradient found here. Unlike a basic linear gradient that can be easily repeated as an image to fill any length, this one poses a challenge. Can anyone share a technique or method to help me ...

htmlcssradial-gradients

Tips for incorporating captions into a slideshow

I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else? H ...

jqueryhtmlcss

Guide to setting up a search function with class name filtering

I am currently managing a website with multiple items, each represented by individual div elements. While all items share one common class name, they also have several other class names serving as tags to differentiate them (some tags may overlap between d ...

javascripthtmlcss

adjusting the background with repeat-y pattern placement

I'm having an issue with setting a background image as a wrapper for the main content of my page. Currently, I've set the background image like this: #background { background: url("../image/bg.png") repeat-y 133px 50px; color: #000000; ...

cssbackground-image

Using percentages for CSS alignment and adjusting element widths

Greetings everyone! I have been struggling to align two divs - one on the right with a width of 30% and the other on the left with 70%. Despite my efforts, I have not been able to find a solution. I am hopeful that someone here can assist me. My setup inv ...

jquerycssjsfprimefaces

What is the best way to prevent card-group from wrapping on smaller screens?

What is the best way to ensure that cards in a card-group stay adjacent to each other on smaller screens? Currently, they are grouped together on larger screens but appear separated on smaller screens. I am currently hiding the additional cards on smaller ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

Improving the layout of text by adjusting the width within a flex-box styled card

I have a card with the style property "display: flex;" applied to it along with other stylings, all of which are checked in the snippet below. My goal is for the text within the card to move to a new line once its width reaches either 120px or 7 ...

htmlcssflexbox

Highlighting table rows using jQuery on click and restoring them on change by toggling between alternating

Hey there, I'm a newbie to jQuery and this is my first post. Spent some time searching but couldn't find exactly what I needed. I'm trying to have alternating row colors in a table; one class as NULL/empty and the other as alt. My jQuery sc ...

phpjqueryhtmlcss

"Adjusting the height of Material UI card content to ensure fixed positioning at the bottom

Currently, I am working on mapping material-ui cards with dynamic content from a JSON object, resulting in varying card heights. I have successfully set a fixed height for each card, but the content is not aligned correctly. You can see the issue in this ...

javascripthtmlcssreactjsmaterial-ui

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...

javascriptcssiframetinymce

Swap out a button for another using JavaScript

I am facing a challenge where I need to replace an active button with a deactivate button. The issue is that when I click on the active button, it does change to the deactivate button as expected. However, clicking again does not switch it back to the acti ...

javascripthtmlcss

What's the name of the auto-triggered dropdown menu feature?

Visit Amazon's official website Description: Within the 'Shop by Department' section- A drop-down menu that remains visible without requiring you to hover over it. However, when the browser is in a non-full-screen mode, the menu disappears ...

jquerycssmenu

Adjust the header's alignment to seamlessly coincide with the uppermost part of the

I'm encountering this peculiar issue with a website I recently started designing. My aim is to make the header perfectly aligned with the top of the page. However, despite my attempts, there persists a stubborn gap that measures around 20px, defying a ...

htmlcss

Why doesn't setting the SVG viewBox to "0 0 100 100" scale my path to 100%?

My current dilemma involves an SVG path that is only displaying at 50% of its intended size. How can I adjust it to show at 100%? Below is the code snippet in question: <div className="svgPathContainer"> <svg width="100%" he ...

cssreactjssvgpathviewbox

What is the best way to eliminate the gap between two columns of square containers?

ref image How can I create equal spacing between two columns of blocks? Please help me with the following code: <div class="row"> <div class="col-md-6"> <img src="./img/02.jpg&qu ...

htmlcssbootstrap-5