列表项的水平对齐/对齐？答案

【问题标题】：Horizontal justification/alignment of list items?列表项的水平对齐/对齐？
【发布时间】：2011-09-28 23:41:03
【问题描述】：

我有以下情况：

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

【问题讨论】：

会将其添加到 css：#access .menu ul{ width: 100%; } 做什么？或者实际上，.menu ul li { width: 100%; } 就此而言

标签： jquery html css navigation

【解决方案1】：

此方法 100% 有效！

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>

【讨论】：

这是跨浏览器吗？

【解决方案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/

【讨论】：

【解决方案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>

见demo fiddle。

【讨论】：

【解决方案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 */
}

【讨论】：

这仅适用于您恰好有四个项目，并且硬编码 35px 用于填充也不是一个好主意，因为任何小的更改都会破坏外观。此外 :first-child 并非所有浏览器都支持。我在下面提出了一个 jquery 解决方案来解决这些问题。

【解决方案5】：

怎么样：

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

【讨论】：

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

【解决方案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>

分隔符需要包含一个&nbsp;-entity 以确保它在所有浏览器中正确显示（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; 
}

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

【讨论】：

【解决方案7】：

我能想到的第一种方法是使用表格而不是无序列表。默认情况下，它会看起来像你想要的那样。此外，由于对齐是自动的，因此添加更多菜单项将变得轻而易举。

Here's a demonstration of a couple of ways to do this

【讨论】：

【解决方案8】：

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'
    });
});

【讨论】：