The 'word-spacing' attribute in CSS is malfunctioning

I am struggling to evenly space out the list items in my unordered list, but they are not spreading out uniformly.

<footer>
    <ul class="footer">
        <li><a href="about">Name©2023</a></li>
        <li><a href="legal">Privacy&Legal</a></li>
        <li><a href="vin-recall-search">Vehicle Recalls</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="blog"&...

Within the CSS file:

footer li{
    word-spacing:20px;
    display:inline-block;
}

The spacing between the list items is inconsistent and does not appear evenly distributed as desired. it appears like this

htmlcssfooterword-spacing

Answer №1

It appears that the issue lies in using spacing on the li elements instead of the ul element.

To fix this, you should adjust your CSS as shown below.

footer li{
    display:inline-block;
    word-spacing: normal;
}

footer ul{
    word-spacing:20px;
}
<footer>
    <ul class="footer">
        <li><a href="about">Name©2023</a></li>
        <li><a href="legal">Privacy&Legal</a></li>
        <li><a href="vin-recall-search">Vehicle Recalls</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="blog">News</a></li>
        <li><a href="updates">Get Updates</a></li>
        <li><a href="findus/list">Locations</a></li>
    </ul>
</footer>

Answer №2

Utilizing the latest Flexbox specification is recommended

footer ul {
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    width: 100%;
}
footer li {
    display: block;
    flex: 0 1 auto; /* Default */
}
<footer>
    <ul class="footer">
        <li><a href="about">Name©2023</a></li>
        <li><a href="legal">Privacy&Legal</a></li>
        <li><a href="vin-recall-search">Vehicle Recalls</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="blog">News</a></li>
        <li><a href="updates">Get Updates</a></li>
        <li><a href="findus/list">Locations</a></li>
    </ul>
</footer>

Discover more at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

Slideshow box with images aligned perfectly

I have designed a container with images, but my goal is to: either show the images inline or stack them on top of each other, and then be able to navigate through them using jQuery. I attempted absolute positioning on both .box and .box img, as well as u ...

htmlcss

The menu on the webpage in smartphone mode is infiltrating other divs on the page

Encountering an issue with the TwitterBootstrap CSS menu on this page when viewed on a smartphone: The div containing the menu does not resize its height, causing it to invade the content below when the "Menu" is clicked. I've been unable to find a ...

htmlcsstwitter-bootstrap

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

Whenever I use a script to fetch an array of objects from PHP... I successfully display the results on my website by outputting them into Divs. The challenge arises when I introduce CSS animations. The animation only triggers if the variable length excee ...

javascriptphpcssjsonanimation

The Twitter Bootstrap modal pops up over the menu, making the links unclickable

Currently, I am employed at a website called . If you navigate to the "Serviços" section on the homepage, you will encounter a row of icons and a blue button labeled "saber mais". Clicking on this button triggers a modal box that displays additional infor ...

csstwitter-bootstrapmodal-dialogpositionz-index

Having difficulty removing padding from material-ui TabPane

Here is my TabPane: https://i.stack.imgur.com/Ihxmn.png I've been attempting to eliminate the padding. Some suggestions on SO led me to try this: <TabPanel value={value} index={i} classes={{ "& .MuiBox-root" ...

cssmaterial-ui

Content is the main driver for CSS Flexbox dynamic aspect-ratio code

When creating a grid layout for a webpage, I opted to use Flexbox. My goal was to incorporate some automatic functionality so that additional grid boxes could be included without the need to manually add classes or styles in the HTML code. One particular f ...

cssflexbox

Sending data to a modal within a loop

I am looking to modify the functionality of my current table setup. Currently, the table is generated by iterating through all the samples passed to it via the context in views.py of my Django app, and this setup is working well. However, I want to imple ...

javascripthtmldjangobootstrap-modal

Is it possible to resize an image to fit within its parent div using only the parent div

Is there a way to ensure that an image inside a div resizes itself based on the dimensions of the div without distorting the ratio? <div class="w-50"> <img src="" class="w-full h-full image-cover"> </div> ...

htmlcsstailwind-css

extract the chosen option from the dropdown menu using AngularJS and input it into a text field

Hello! I am a beginner in AngularJS and currently working on creating a unit converter demo app. My app consists of two dropdowns for selecting the source and destination units. I need help in getting the selected values from the dropdowns into an input fi ...

javascripthtmlangularjs

Retrieving the title property with the power of JavaScript

https://i.sstatic.net/cp7qK.png My journey into JavaScript is just beginning, and I'm currently immersed in a project that involves using facial recognition technology to detect emotions. While the software successfully detects emotions, I am struggl ...

javascriptjqueryhtmlangularjs

The AJAX function fires only on the first click and does not work upon subsequent clicks when utilizing buttons within dynamically created tables

Currently, I am facing an issue where I am attempting to trigger an event to delete an element. This particular delete event should apply to the element that is clicked as well as an object above it. The Ajax call below works perfectly fine when utilized w ...

javascriptjqueryhtmlajaxdom

Having trouble accessing the value of a node in JavaScript, as it keeps returning as "null"

Experimenting with converting HTML elements into lists. The objective is to generate a list of all values in a table upon clicking the "page next" buttons on it. Afterward, an alert should display the value of the first item in the list, which corresponds ...

javascriptjqueryhtmllistnodes

Manipulate classes based on scrolling (Wordpress)

Trying to manipulate a widget by adding and removing classes based on user scroll behavior has proven to be quite challenging. Specifically, I aim to add one class when the user scrolls down by 50px and remove it when they scroll back up. Website: Check o ...

javascriptcssajaxwordpresswordpress-theming

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

javascriptjqueryhtmlcssrotation

Changing the color of a placeholder using Javascript: A step-by-step guide

I've been searching online without any luck so far. I'm attempting to change the placeholder color of a text box using JavaScript, but I'm not sure how to go about it. I already have a color picker that changes colors. If my CSS looks somet ...

javascripthtmlcsspseudo-element

JQuery for creating sleek scale animations

I am currently working on a page where I have an image with a pointer down icon. When the user hovers over it, a list of products should be displayed and the pointer should compress. Everything is functioning correctly except for the animation aspect. I am ...

jqueryhtmlcss

Using HTML nested lists in Wordpress sites

Working on nested, ordered lists using ol types and encountering an issue where the code appears correctly in Wordpress preview but displays incorrectly in Firefox and IE. The lists are showing as numbered instead of the specified types in the code provide ...

htmlwordpressnested-lists

Struggling to get the HTML layout just right on my MVC 5 Razor Page with Bootstrap CSS

I am currently facing difficulties aligning elements and displaying them in the same row. I am using MVC 5 razor pages along with HTML and Bootstrap.css. Despite spending several days on it, I have only made minimal progress since I started. I will provide ...

htmlcssasp.net-mvcrazorbootstrap-4

Incorporating a variety of images into this hexagonal design framework

Hello there! I am just starting to learn CSS and HTML, and I have a question. Is it possible for me to use the same CSS styling but have different images inside each of the hexagons? I want to replace the image '' with multiple images without rep ...

htmlcsscss-shapes

Enhancing visual aesthetics with Vuetify on v-slot label components

I am working with Vuetify code that appears like this <v-radio-group v-model="gender" column class="radio-group-full-width"> <v-radio value="Boy"> <template v-slot:label> <v-textarea v-model="answer" v-vali ...

cssvue.jsvuetify.jsv-slot