46

我有一个水平导航栏，如下所示：

<ul id = "Navigation">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

我使用 CSS 删除项目符号并使其水平。

#Navigation li
{
    list-style-type: none;
    display: inline;
}

我试图证明文本的合理性，以便每个链接均匀分布以填满整个ul空间。我尝试同时添加text: justify和li选择ul器，但它们仍然是左对齐的。

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

这很奇怪，因为如果我使用text-align: right，它的行为符合预期。

如何均匀分布链接？

4

10 回答 10

39

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.

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.

Using justify-content: space-between - (example here):

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>

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

于 2015-03-25T05:04:59.953 回答
35

您需要使用“技巧”来完成这项工作。

见：http: //jsfiddle.net/2kRJv/

HTML：

<ul id="Navigation">
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS：

#Navigation
{
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li
{
    display: inline
}
#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

有关 IE6/7 诡计的详细信息：内联块在 Internet Explorer 7、6 中不起作用

于 2011-07-29T22:32:30.223 回答
25

This can also be achieved using a pseudo element on the ul element:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}

li {
    display: inline;
}
于 2013-06-03T16:21:45.837 回答
5

Just do:

ul { width:100%; }
ul li {
  display:table-cell;
  width:1%;
}
于 2015-02-16T09:47:37.537 回答
4

这可能适合您的需求：

#Navigation{
}
#Navigation li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%; /*if 2 <li> elements, 25% if 4...*/
}

演示：http: //jsfiddle.net/KmqzQ/

于 2011-07-29T22:36:32.240 回答
3

HTML

<ul id="Navigation">
    <li><a href="#">The Missing Link</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Riluri</a></li>
    <li><a href="#">Contact us</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS

#Navigation {
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li{
    display: inline
}

#Navigation li a {
    text-align: left;
    display:inline-block;
}

#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

View demo: http://jsfiddle.net/2kRJv/392/

于 2013-02-01T15:44:55.480 回答
1

You need to have the <li> elements separated, otherwise the justify won't work.

For example, this:

<ul><li>test</li><li>test</li></ul>


needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>

or at least have spaces between the opening and closing <li> tags.

于 2014-04-16T15:50:18.847 回答
0

This blog has a satisfyingly robust solution. It needs some slight changes to accommodate a ul/li navigation, though:

#Navigation {
    width: 100%;
    padding: 0;
    text-align: justify;
    font-size: 0;
    font-size: 12px\9; /* IE 6-9 */
}
#Navigation>li {
    font-size: 12px;
    text-align: center;
    display: inline-block;
    zoom: 1;
    *display: inline; /* IE only */
}
#Navigation:after {
    content:"";
    width: 100%;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

http://jsfiddle.net/mblase75/9vNBs/

于 2013-11-06T15:04:49.913 回答
0

The marked answer does not work if has a white space in it.

The top answer here works with white spaces How do I *really* justify a horizontal menu in HTML+CSS?

于 2014-03-18T19:38:35.160 回答
0

Using CSS Flexboxes

#Navigation {
  width: 100%;
  padding: 0;
  margin: .5rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  list-style-type: none;
  color: #ffffff;
}
于 2021-09-02T22:58:30.950 回答