Is the space-between property not delivering the desired spacing?

I am trying to achieve equal spacing between list items, and I attempted the following code.

ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

However, it seems that this approach is not working as expected. I am confused about why?

PS: Interestingly, using gap: 10px (with 'px' being an example) works instead, adding a gap between the list items. Shouldn't justify-content: space-between; provide the same result?

EDIT: Provided below is the relevant HTML:-

<div class="left-links">
    <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
    <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
    </ul>
</div>

1: The current output when using justify-content: space-between;:

2: The desired outcome (achieved with gap: 10px;):

htmlcssflexbox

Answer №1

Adjust the width of your left and right links classes as shown in the code snippet below. Hopefully, this solution will help you resolve the issue

ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}
.container {
  display: flex;
  justify-content: center;
}
.left-links {
  width: 40%;
}
.right-links {
  width: 40%;
}
.logo {
  width: 20%;
  text-align: center;
}
<div class="container">
<div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
</div>

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

Running a method at any given time within an ngFor loop in Angular 5

On my angular page, I am facing a challenge with updating a variable and displaying it in the HTML within an *ngFor loop. Here is an example of what I need: HTML: <table *ngFor="let data of Dataset"> somehowRunThis(data) <div>{{meth ...

htmlangulartypescript

What is the process for generating an Electronic Program Guide for television?

Welcome to the forum! I'm a front-end developer at a company for 6 months now, currently working on a TV app. It's my first experience in this field and I'm facing some challenges, particularly with creating an epg for the app. Unfortunately ...

javascriptcssvue.jstelevisionepg

Tips for customizing MUI PaperProps using styled components

I am trying to customize the width of the menu using styled components in MUI. Initially, I attempted the following: const StyledMenu = styled(Menu)` && { width: 100%; } `; However, this did not have any effect. After further research, I ...

javascriptcssreactjsmaterial-ui

Cannot assign border to an undefined element - JavaScript

Currently, I am attempting to validate some code using javascript. However, I am encountering a frustrating issue where I keep getting an "Uncaught TypeError: Cannot set property 'border' of undefined". Being relatively new to javascript, I ...

javascripthtml

Prevent the display of hyperlinks in the status bar when hovering over a hyperlink or button

The application I'm working on has a default status bar at the bottom of each screen that displays URLs linked to buttons and icons. For example: https://i.stack.imgur.com/ZFTsp.jpg I am trying to prevent the display of URLs associated with hyperlin ...

javascriptjqueryhtmlhyperlinkstatusbar

Adding one class at a time, with each new class being added every second

My goal is to add classes one by one [test0 test1 test2] up to 10, with each class being added after one second. $('.rating-block').AddClass('test0 test1 test2 ... test10' ); I am experimenting with the following code, but I don' ...

jqueryhtmlarrays

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

javascripthtmlangularjsangularjs-ng-repeatdirpagination

Steps to include a title next to a progress bar:

Is there a way to achieve something like this? I attempted to use bootstrap but I ran into an issue where the title was slightly misaligned below the progress bar. Can someone offer assistance with this matter? Apologies if this has been asked before. H ...

javascripthtmlcsstwitter-bootstrap-3

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

javascripthtmlcanvasrenderingpixi.js

Show specific hyperlinks in Django depending on the user group

{% extends 'base.html' %} {% block content %} <p>Welcome to the homepage.</p> <p>{% user.groups.all() %}</p> {% endblock %} Currently, I'm exploring ways to display all the user's groups on the page. Howeve ...

htmldjangotemplates

Arrange the table by column following a service request

Is there a method to organize the table below once it has been loaded? I am utilizing Google API to retrieve distance matrix data, but I want the table to be sorted by distance. However, this sorting should take place after the Google service call is comp ...

javascriptjqueryhtmlajaxmodel-view-controller

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

jqueryhtmlcssgsap

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Using jQuery to select the child element of the parent that came before

Recently, I've been experimenting with creating animations using CSS and jQuery. While it has been successful so far, I'm now looking to take it a step further. Specifically, I want information to appear on top of an image when the user clicks on ...

javascriptjqueryhtmlcss

What causes the Material-UI Grid element to shift upon clicking it?

I have encountered an issue while developing a React app with Material UI. The problem arises on a specific page of the application. This particular page consists of text and a button aligned vertically, along with a second set of text and another button ...

cssreactjsflexboxmaterial-uigrid-layout

Semantic HTML and unambiguous: both

We are making an effort to enhance the semantics of our HTML, and one element that stands out in our code related to presentation is <div class="clear"></div> For instance, if we consider the following semantic HTML structure: <div class= ...

htmlcsssemanticssemantic-markup

Using CSS and jQuery to Enhance Page Transitions

Seeking assistance with creating a unique page transition similar to this one: Basing the animation on my own design concept found here: Current experiment can be viewed at: https://jsfiddle.net/f7xpe0fo/1/ The animation does not align with my design vi ...

jqueryhtmlcss

conceal elements using the <option> class隐藏

Although it seems like a simple task, I'm struggling to make it work. I created a form where the user can select a month from a list using the tags: <select> <option> When the selection is changed, the class .gone from the day SELECT is ...

javascripthtmlcssformshtml-select

Is your WordPress one-page scroll JQuery script failing to function properly?

Currently attempting to develop a single page scroll feature. Within WordPress, my navigation contains anchor tags structured as follows: <a href="#contact">Contact</a> <a href="#about">About</a> The corresponding divs for the li ...

javascriptphpjqueryhtmlwordpress

How can I style <p> tags with a specific font in Tailwind Typography?

For instance, suppose I wish to utilize the markdown as shown below: # AAAAAAAAAa BBBBBBB This would then be interpreted in such a way that AAAAAAAAAa is designated as h1, BBBBBBB as <p>, and the entire content enclosed within a prose div utilizing ...

cssreactjsnext.jstailwind-css