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>

由于导航所在的外部容器宽度为800px，导航容器的宽度也是800px。

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

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

Answer 2

如果您希望它适用于任意数量的“li”，则此答案适用：

如果你给李的显示：阻止;

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/

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>

请参阅demo fiddle。

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 */
}

Answer 5

怎么样：

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

Answer 6

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

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

Answer 7

唯一合理的跨浏览器非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宽度而导致文本被包装。

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

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

8 个答案:

此方法100％工作！