水平菜单

Question

我有以下

HTML：

<div id="filter-menu">
    <div class="filter-item home selected"></div>
    <div class="filter-item animals"></div>
    <div class="filter-item ancient"></div>
    <div class="filter-item energy"></div>
    <div class="filter-item env"></div>
    <div class="filter-item travel"></div>
</div>

<小时/> 的 CSS：

#filter-menu{
    width: 505px;
    height: 40px;
    float: left;
    margin-left: 10px;
    margin-top: 3px;
}

#filter-menu .filter-item{
    float: left;
    height: 38px;
    width: 84px;
    background-position: top;
    background-repeat: no-repeat;
    margin-right: 4px;
}

#filter-menu .selected{
    margin-top: 3px;
}

#filter-menu .home{
    background-image: url('images/Home.png');
    width: 78px;
}

#filter-menu .animals{
    background-image: url('images/Animals.png');
    width: 80px;
}

#filter-menu .ancient{
    background-image: url('images/Ancient.png');
    width: 80px;
}

#filter-menu .energy{
    background-image: url('images/Energy.png');
    width: 79px;
}

#filter-menu .env{
    background-image: url('images/Environment.png');
    width: 85px;
}

#filter-menu .travel{
    background-image: url('images/Travel.png');
    width: 79px;
}

---

1. 第一个菜单项在左边框之间不应有任何距离。
2. 最后一项不应与右边界之间有任何距离。
3. 应自动选择菜单项之间的距离。

PIC： 请帮助重写css规则。因为这样手动距离设置，最后一个元素不会粘到右边界。

Answer 1

我不建议你这样做..而是创建居中的菜单..拉伸菜单不好..

但是有另一种方法可以做到这一点..使用表格..

 #nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;

    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
}

这是一个演示..你可以相应地自定义.. http://jsfiddle.net/eCPSh/647/