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

Does MySQL Workbench automatically convert camel case attributes?

I'm curious to understand something. I defined an attribute called userId, but in MySQL Workbench it shows up as user_id. Is this usual? @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name= "userId") private ...

htmlmysqlspring-boothibernatemysql-workbench

What is the best way to display a SolidJS component on the screen?

I am currently working on a unique menu design for my application. The concept involves rendering a functional component within an element created in the body using createRoot and render methods. https://i.stack.imgur.com/g6Ofv.png export function create ...

javascripthtmldomsolid-js

Ways to enhance the legibility and visibility of the text

On my website, there's an image that appears as follows: I attempted to add a shadow to the text, resulting in this look: However, the shadow seems out of place. Any ideas on how I can enhance readability without altering the text color or backgrou ...

htmlcsstextbackgroundphoto

What is the best way to split a jQuery tab into four equally sized divs?

I am currently working with jquery tabs and within one of the tabs, I have 4 google charts each enclosed in a separate div. My goal is to position each div in a different quadrant of the tab area (north, south, east, and west of the screen). Currently, my ...

jqueryhtmlgoogle-visualizationjquery-tabs

The Jquery watermark extension in IE9 is capable of transmitting the watermark as the primary value of the form

I have integrated a plugin into my project. The plugin can be downloaded from this link. However, I am facing an issue where the watermark value is being submitted as the textbox's value in Internet Explorer 9. How can I resolve this problem? Intere ...

javascriptjqueryhtmlinternet-explorerwatermark

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

"Uncovering the mystery of the missing element in Jquery's open

I have developed a click-to-show feature that opens and closes a div from left to right. You can view the demo here on jsfiddle.net In the demo, you will find a green-colored div. Upon clicking this div, another div opens from left to right. An interesti ...

javascriptjquerycss

Basic progress bar

I'm attempting to create a basic download bar, but it's only displaying as a solid color without any transition animation. Furthermore, the "repeating-linear-gradient" feature isn't functioning and I'm struggling to figure out why. I&a ...

csshtml

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

As a user types or erases characters, I am utilizing redux to update an array of characters. This allows me to set a success flag when the user correctly types the entire phrase. Currently, when typing in characters, the SET_INPUT action in redux fires of ...

javascripthtmlreactjsredux

Incorrect sorting of tables in Bootstrap

I've been struggling to position 3 tables as shown in the image, but they keep stacking vertically instead of horizontally. The desired layout is to have two tables on one side and three on the other side. Can anyone provide guidance on achieving this ...

htmlbootstrap-4

What's the issue with my ExpressJS req.query not functioning as expected?

My NodeJS repl setup includes an input, button, and h1 element. The goal is to update the HTML inside the h1 element with the value of the input upon button click. Here's a glimpse of my code: index.js: const Database = require("@replit/database ...

javascripthtmlnode.jsajaxexpress

React cannot be utilized directly within HTML code

I am looking to incorporate React directly into my HTML without the need for setting up a dedicated React environment. While I can see the test suite in the browser, my React app fails to load. Below is the content of my script.js file: I have commented ...

javascripthtmlreactjs

Having difficulty comprehending the syntax of Linear Gradients

Seeking assistance on understanding how background images and linear gradients function together. Currently, I am only seeing a solid color instead of the intended image. Can someone please explain how this code is supposed to work? background-image:lin ...

cssuser-interfacebackground-imagelinear-gradients

Xpath merging HTML elements or nodes

<tr id="computer-report-tbl-row-0" ng-repeat="item in table.data.items" class="ng-scope" style=""> <td id="column-name-0" class="table-cell-md" sc-ellipsis-title="" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> ...

htmlseleniumxpath

Cutting Out Sections of a List

I'm currently working on an app that involves looking up and navigating to specific locations. I've encountered an issue with the coordinates in my code containing a ',0' at the end, which is not compatible with Google Maps. Manually re ...

javascripthtmlarraysangularjsgoogle-maps

Creating a fixed column in an Angular Material Table for enhanced user experience

Has anyone found a method to implement a sticky first column in Angular Material using CSS? Check out the editable Stackblitz code here. I attempted to modify this approach from https://jsfiddle.net/zinoui/BmLpV/, but encountered issues where the first c ...

cssangularangular-material-5

Is there a way to deactivate keyboard input on an HTML number input field? How about in a React or Material-UI environment?

I am working with an <input> tag that has the attribute type="number", and I want to disable keyboard input so that users are required to adjust the value using the spinner (up and down arrows). This will allow me to consume the input value on each c ...

javascripthtmlreactjsmaterial-ui

What is the best way to include CSS styles in a React app with Webpack?

Having an issue with my React app. Upon successfully compiling Webpack and serving the content, no styles are displayed within the app. This is the current content of my webpack.config.js file: const path = require('path'); const BUILD_DIR = pat ...

cssreactjswebpack

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

javascripthtmlcss

What is the best way to show a message next to a text box in a form?

I have a form called test.php with two buttons for entering an email ID and user ID, as well as a submit button. Upon clicking the submit button, my code checks if the email ID exists and displays a message to the user. I want to show this message next to ...

phphtmlmysql