我有一个水平导航栏,如下所示:
<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
,它的行为就像预期一样。
如何均匀分布链接?
答案 0 :(得分: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欺骗的详细信息:Inline block doesn't work in internet explorer 7, 6
答案 1 :(得分:31)
现在我们已经CSS3 flexboxes,您不再需要采用技巧和变通方法来实现这一目标。幸运的是,browser support has come a long way,我们大多数人都可以开始使用flexbox。
只需将父元素的display
设置为flex
,然后将justify-content
property更改为space-between
或space-around
,以便在/ {儿童弹性箱物品。然后为more browser support添加其他供应商前缀。
使用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>
使用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>
答案 2 :(得分:24)
这也可以使用ul
元素上的伪元素来实现:
ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: justify;
}
ul:after {
content: "";
width: 100%;
display: inline-block;
}
li {
display: inline;
}
答案 3 :(得分:4)
这可能符合您的需求:
#Navigation{
}
#Navigation li{
list-style-type: none;
text-align: center;
float: left;
width: 50%; /*if 2 <li> elements, 25% if 4...*/
}
答案 4 :(得分:4)
只是做:
ul { width:100%; }
ul li {
display:table-cell;
width:1%;
}
答案 5 :(得分: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
}
答案 6 :(得分:1)
你需要&lt; li&gt;元素分开,否则证明不会起作用。
For example, this:
<ul><li>test</li><li>test</li></ul>
needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>
或者至少在开始和结束之间具有空格&lt; li&gt;标签
答案 7 :(得分:0)
This blog有一个令人满意的强大解决方案。但是,它需要进行一些细微的更改以适应ul/li
导航:
#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;
}
答案 8 :(得分:0)
如果标记的答案中有空格,则标记的答案不起作用。
这里的最佳答案适用于空格 How do I *really* justify a horizontal menu in HTML+CSS?