Styling a CSS-HTML unordered list menu with a separator that is perfectly aligned with

Currently, the menu has been created with the following CSS:


nav{
width:1024px;
margin: 0 auto;
}

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

li {
border-right: 1.1px solid #333333;
margin: 0 auto;
padding: 0 1em;
text-align: center;
flex-grow: 1;
flex-basis: initial;
text-align: center;
}

The corresponding HTML is:

<nav id="menu">
                <ul>
                    <li>Home</li>
                    <li>Training & Support</li>
                    <li>Templates & Forms</li>
                    <li>Policy Documents</li>
                    <li>Payment Administration</li>
                    <li>Tax Compliance</li>
                    <li>News</li>
                </ul>
            </nav>

The current result looks like this: https://i.sstatic.net/9wM8E.png

However, the desired layout is shown in the image below where the first and last child elements are aligned at the start and end of the ul container.

https://i.sstatic.net/dOYVW.png

What steps should be taken to achieve this layout?

Answer №1

Did you attempt deleting text-align: center; ???
Or in the list item, experiment with something like padding-right: 0;
Please share your results with me.

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

Is there a way to reset my div back to its initial background color when clicked a second time?

I am currently utilizing the jQuery addClass and removeClass animate feature for my project. Basically, what is happening is that when the user clicks on a particular link, a dropdown navigation will appear. This feature is essential for ensuring responsi ...

JQuery - Receive an error message when a value is missing

With my Website almost complete, I just need to add an error message for when a movie isn't found. I have an API that returns JSON and if someone enters an invalid movie like "ifeahaef," it returns null. Is there a way to use Jquery to display an erro ...

How feasible is it to customize the "ionic-img-viewer" npm package or replicate its image styling in Ionic 2?

I am wondering if it is possible to edit or add additional styles when my image is viewed using the "ionic-img-viewer" npm package. Alternatively, how can I apply the same styles as those on my original image tag? For example, here is my img tag with some ...

Turn off interpolation during the scaling of a <canvas> tag

Important: The issue at hand pertains to the rendering of existing canvas elements when scaled up, rather than how lines or graphics are rendered onto a canvas surface. In simpler terms, this revolves around the interpolation of scaled elements, not the an ...

Triggering PHP functionality in JavaScript when a button is clicked

Struggling to run PHP code inside JavaScript with button onclick event. I have a pair of pages named test.php and demo.php, each containing a button. My goal is to disable the button in demo.php when the button in test.php is clicked. Moreover, upon reload ...

Issues with font rendering on Firefox making it difficult to read

Our website's Wordpress theme utilizes the font Montserrat, which is properly displayed in Chrome, IE, and Safari, but is experiencing issues in Firefox. Below is the CSS styling for the font: @font-face { font-family: 'montserratbold'; ...

Guide on making a button for adding products to the shopping cart

I have put together this web page Check out the views.py code below: from django.shortcuts import render from django.http import HttpResponse from .models import Pizza # Managing views here. def index(request): pizzas = Pizza.objects.all().order_by( ...

Guide to dynamically updating a text file on a live PHP website

Is there a way to display real-time modifications to a text file on my website without the need for a page refresh timer? The current code for the site can be accessed here. if (isset($_GET['enSubmit']) && isset($_GET['uname']) ...

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

Manipulating strings within strings with JavaScript

It's been a strange discovery I made while working with JavaScript. Whenever I try to assign a two-word string to a CSS property, like setting the fontFamily property of an HTML element to "Arial Black", it ends up looking something like thi ...

Encountering difficulties connecting to the database within Vue data tables

My php script was working fine with vuetify data, but now every page is showing the error message: Your search for "{{ search }}" found no results. It seems like this issue occurs when the script cannot fetch data from the database. Here is my d ...

Mobile devices do not support HTML5 Video playback

Here is the HTML5 Video code I am using: <div id="lightBox1" class="lightBox"> <video id="video" controls preload="metadata"> <source width="100%" height="470" src="/ImageworkzAsia/video/iworkzvid.mp4" type="video/mp4"> ...

Issue with CSS line height - Struggling to determine the precise number of lines

Despite finding an old post on this topic, the most popular answer and other solutions didn't work for many people. Even years later, I am still facing the same issue. My goal is to create a div that is precisely 19 lines tall (ideally aiming for 19. ...

Fuzzy picture utilizing <canvas>

Working on translating a webgame from Flash to HTML5 with pixel art sprites, I've noticed that the canvas appears blurry compared to Flash where pixels are more defined. <!DOCTYPE html> <html> <body> <canvas id="c" style="bor ...

Tips for updating the contents of a div dynamically in JavaScript/jQuery without the need for clicking a button or a link

Is there a way to automatically reload or refresh the content of a specific div element without refreshing the entire page, and without any user interaction such as clicking a button or link? I am looking to update the div with the id 'div_graph' ...

When HTTP 304 meets the Cache-Control directive with a value of no-cache

I'm encountering the following response from certain web server requests: First request: HTTP/1.1 200 OK Date: Mon, 16 Jan 2012 05:46:49 GMT X-Powered-By: Servlet/2.5 JSP/2.1 Content-Type: text/plain Content-Length: 78 Content-Encoding: gzip Etag: " ...

I found it challenging to select a particular choice using Selenium in Python

My goal is to use Selenium and Python to select the "Yazar" option within this particular HTML tag. However, I have encountered a problem where I am unable to successfully click and choose the "Yazar" option. Can anyone provide guidance on how to achieve t ...

Using HTML and JavaScript to implement a dragging functionality on a canvas element

After creating a square grid using HTML canvas, I've added a drag feature that allows users to draw rectangles by dragging over the grid. However, it seems that non-rectangle shapes can also be drawn in certain cases. Let's delve into an additio ...

Is there a way to utilize solely Javascript in order to crop an image?

Is there a way to crop an image using plain JavaScript? I need a function that can take an image with specific width, height, offsetX, and offsetY and create a new image of the specified portion. I'm not very knowledgeable about HTML5 canvas and simi ...