英文:
CSS 'word-spacing' property not working properly
问题
我有一个无序列表，其中包含我想要均匀分布的列表项，但元素之间的间距不均匀。
<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;
}
项目之间的单词间距不均匀。
它看起来像这样：
英文:
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
答案1
得分: 0
这是因为您在li元素上使用了间距，而不是在ul元素上。
您需要像下面这样更改您的CSS。
footer li{
display:inline-block;
word-spacing: normal;
}
footer ul{
word-spacing:20px;
}
英文:
That's because you use the spacing on the li elements instead of the ul element.
You need to change your CSS like below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
footer li{
display:inline-block;
word-spacing: normal;
}
footer ul{
word-spacing:20px;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
你可以使用新的Flexbox规范，如下所示：
footer ul {
display: flex;
align-items: stretch; /* 默认值 */
justify-content: space-between;
width: 100%;
}
footer li {
display: block;
flex: 0 1 auto; /* 默认值 */
}
<footer>
<ul class="footer">
<li><a href="about">Name©2023</a></li>
<li><a href="legal">隐私与法律</a></li>
<li><a href="vin-recall-search">汽车召回</a></li>
<li><a href="contact">联系我们</a></li>
<li><a href="blog">新闻</a></li>
<li><a href="updates">获取更新</a></li>
<li><a href="findus/list">位置</a></li>
</ul>
</footer>
参考链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
英文:
You can use the new Flexbox specification as well
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
footer ul {
display: flex;
align-items: stretch; /* Default */
justify-content: space-between;
width: 100%;
}
footer li {
display: block;
flex: 0 1 auto; /* Default */
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
For Ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论