Question 184229 in Html Question posted in
Some basic documentation can be found here.

Html – CSS 'word-spacing' property not working properly

I have an unordered list with list items that I want to spread evenly from each other but the elements don’t spread evenly.

<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>

In the CSS file:

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

The word spacing between the items isn’t identical.
it looks like this

Tags:

2

Answers


  1. 0

    That’s because you use the spacing on the li elements instead of the ul element.

    You need to change your CSS like 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>
    Login or Signup to reply.
  2. 0

    You can use the new Flexbox specification as well

    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>

    For Ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search