我有一個無序列表，其中的列表項我想平均分布，但是元素分布不均勻。

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

在CSS文件中:

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

項目之間的單詞間距不同。 它看起來像這樣

這是因為您在li元素上使用了間距，而不是ul元素。

你需要改變你的CSS如下。

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>

您也可以使用新的Flexbox規(guī)范

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>