如何证明水平列表的合理性? [英] How do I justify a horizontal list?
问题描述
我有一个水平导航栏,如下所示:
I have a horizontal navbar like the following:
<ul id = "Navigation">
<li><a href = "About.html">About</a></li>
<li><a href = "Contact.html">Contact</a></li>
<!-- ... -->
</ul>
我使用CSS删除项目符号并使其水平。
I use CSS to remove the bullet points and make it horizontal.
#Navigation li
{
list-style-type: none;
display: inline;
}
我试图证明文本的正确性,所以每个链接均匀分布填充整个 ul
的空间。我尝试为 li
和 ul
text:justify >选择器,但它们仍保持左对齐。
I'm trying to justify the text so each link is spread out evenly to fill up the entirety of the ul
's space. I tried adding text: justify
to both the li
and ul
selectors, but they're still left-aligned.
#Navigation
{
text-align: justify;
}
#Navigation li
{
list-style-type: none;
display: inline;
text-align: justify;
}
这很奇怪,因为如果我使用 text-
This is strange, because if I use text-align: right
, it behaves as expected.
如何均匀分布链接?
推荐答案
现代方法 - CSS3 Flexbox
现在我们有 CSS3 flexboxes ,你不再需要诉诸技巧和解决方法,以使这项工作。幸运的是,浏览器支持已经有很长的路要走,我们大多数人都可以开始使用flexbox了。
Modern Approach - CSS3 Flexboxes
Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.
只需将父元素的显示
设置为 flex
,然后更改 justify-content
属性添加到 之间的空格
或 space-around
,以便在/ flexbox项之间添加空格。然后添加更多浏览器支持的其他供应商前缀。
Just set the parent element's display
to flex
and then change the justify-content
property to either space-between
or space-around
in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.
使用 justify-content:space-between
- ( ) : :
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-between;
}
<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Contact Longer Link</li>
<li>Contact</li>
</ul>
使用 justify-content:space-around
- (example here) :
ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
display: flex;
justify-content: space-around;
}
<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Contact Longer Link</li>
<li>Contact</li>
</ul>
这篇关于如何证明水平列表的合理性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!