列表项的水平对齐/对齐方式是什么？

Question

我有以下情况：

<nav id="access" role="navigation">
    <div class="menu">
        <ul>
            <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li>
            <li class="page_item"><a href="#booking" title="Booking">Booking</a></li>
            <li class="page_item"><a href="#contact" title="Contact">Contact</a></li>
            <li class="page_item"><a href="#map" title="Map">Map</a></li>
        </ul>
    </div>
</nav>

由于包含导航的外部容器宽度约为800像素，因此导航容器的宽度也是800像素。

#access .menu ul li {
    float: left;
}

我将所有菜单元素向左浮动以便它们并排对齐。我想知道如何在所有列表项之间创建相等的空间，就像这样：

____________________________________ <- this is what I have now
item  item  item  item  item

____________________________________ <- this is what I want
item    item    item    item    item

有什么办法可以解决这个问题吗？可以使用纯CSS或jQuery吗？

- matt

---

将这个添加到CSS中：#access .menu ul{ width: 100%; }会有什么作用吗？或者，实际上，.menu ul li { width: 100%; }呢？ - iamserious

Answer 1

这种方法百分百有效！

CSS：

.menu { position:relative; text-align:justify; text-align-last:justify; border:1px solid silver; height:2.2em; min-width:800px; }
.menu li { display:inline-block; background:silver; padding:.5em 1em; cursor:pointer; text-align:center; }
.menu li:hover { background:black; color:white; }
.menu:after { content:""; display:inline-block; width:100%; height:0; overflow:hidden; }

HTML:

<ul class="menu">
    <li>About</li>
    <li>Company</li>
    <li>Products</li>
    <li>Menu item</li>
</ul>

- Viktor

---

这个是跨浏览器的吗？ - Philip

Answer 2

如果您希望它适用于任意数量的“li”：

如果您将您的li设置为display:block;

li {float:left; display:block; }

那么以下脚本可以完成您的任务：

var first = $("li:first");
var allOther = $("li").not(":first, :last");
var last = $("li:last");

var remainingWidth = $(".menu").width() - first.width() - last.width();
allOther.width(remainingWidth / allOther.length).css("text-align", "center"); 

在 jsFiddler 上查看它：http://jsfiddle.net/PLQFj/14/

- Mo Valipour

Answer 3

.menu {
    text-align: justify;
}
.menu ul,
.menu li {
    display: inline;
}
.menu ul::after {
    display: inline-block;
    width: 100%;
    content: "";
}    

但为了跨浏览器兼容性（IE7），您应该在标记中使用额外的元素来替换::after：

<nav id="access" role="navigation">
    <div class="menu">
        <ul>
            <li class="page_item"><a href="#pricing" title="Pricing">Pricing</a></li>
            <li class="page_item"><a href="#booking" title="Booking">Booking</a></li>
            <li class="page_item"><a href="#contact" title="Contact">Contact</a></li>
            <li class="page_item"><a href="#map" title="Map">Map</a></li>
        </ul>
        <span></span>
    </div>
</nav>

请查看演示代码。

- NGLN

Answer 4

FIDDLE: http://jsfiddle.net/QR5s3/

*CSS（从浮动的li更改为内联的li）*

#access .menu ul {
    text-align:center;   
}

#access .menu ul li:first-child {
    padding-left:0 !important;
}

#access .menu ul li:last-child {
    padding-right:0 !important;
}

#access .menu ul li {
    display:inline;
    padding:0 35px; /* ADJUST PADDING */
}

- kei

---

只有当你确切地有四个项目时，才能这样做。而且硬编码35像素的填充不是一个好主意，因为任何小的变化都可能破坏外观。此外，:first-child并不被所有浏览器支持。我在下面提出了一个jQuery解决方案来解决这些问题。 - Mo Valipour

Answer 5

这样怎么样：

#access .menu ul li 
{     
   float: left; 
   margin-right: 10px
} 

- Fiona - myaccessible.website

---

“margin-right” 不是更好的选择吗？否则，最左边的项目将被错误地定位。 - Hubro

Answer 6

唯一合理的跨浏览器非JavaScript方法，恐怕只能使用<table>。这并不是非常优雅，但它可以完成工作。基于浮动的布局无法正确地显示大小可变的项目。整个过程甚至应该在IE 6中正常工作。

标记

<table class="nav">
    <tr>
        <td class="item">item</td>
        <td class="separator">&nbsp;</td>
        <td class="item">item</td>
        <td class="separator">&nbsp;</td>
        ...
    </tr>
</table>

分隔符需要包含一个 实体，以确保在所有浏览器上正确显示（IE在这里会忽略空单元格）。

风格

.nav, .nav tbody, .nav tr {
    width: 100%;
}
.nav .item {
    /* this forces the item to be as small as possible,
       which forces the separators to take up the
       remaining space */
    width: 1px; 
}

您需要确保所有项目的内容都用 替换空格，以防止由于1px宽度而导致的文本换行。

- jwueller

Answer 7

CSS：

#access
{
    border: 1px solid #DDDDDD;
    height: 50px;
    width: 800px;
}

.menu ul li
{
    float: left;
}

.menu ul {
    margin: 0;
    padding: 0
}

JQUERY：

var li = $('#access ul li').length - 1;
var w = 0;
$('#access ul li').each(function() {
    w = w + $(this).width();
});
var eachPlot = ($('#access').width() - w) / li;
$('#access ul li:gt(0)').each(function() {
    $(this).css({
        'margin-left': parseInt(eachPlot) + 'px'
    });
});

- thecodeparadox

Answer 8

我能想到的第一种方法是使用表格而不是无序列表。这样它会默认呈现出你想要的样式。此外，添加更多的菜单项也很容易，因为对齐是自动的。

这里演示了几种实现方式

- Hubro