使第一个和最后一个孩子占据剩余的水平空间

Question

我需要一个水平的链接列表，其中的元素只有必要的宽度（基于文本宽度），但第一个和最后一个元素占用所有剩余的空间：

我知道怎么做that the last element stretches，但我不知道如何平均分配第一个和最后一个元素之间的空间。

这是我得到的：（Fiddle）

<ul id="menu" class="clearfix">
    <li class="entry">
        <a href="Index.html">
            Home
        </a>
    </li>
    <li class="entry">
        <a href="Osteopathie.html">
            Osteopathie
        </a>
    </li>
    <li class="entry">
        <a href="Behandlung.html">
            Behandlung
        </a>
    </li>
    <li class="entry">
        <a href="Schwangerschaft.html">
            Schwangerschaft
        </a>
    </li>
    <li class="entry">
        <a href="Praxis.html">
            Praxis/Kontakt
        </a>
    </li>
    <li class="entry">
        <a href="Persoenlich.html">
            Persönlich
        </a>
    </li>
    <li class="entry">
        <a href="Aktuell.html">
            Aktuell
        </a>
    </li>
</ul>

CSS：

#menu {
    height: 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu .entry {
    float: left;
}

#menu .entry:last-child {
    float: none;
    overflow: hidden;
}

#menu .entry a {
    font-family: Verdana;
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    color: #9d0a6d;
    text-decoration: none;
    padding: 0 10px;
    display: block;
    border: 1px solid black;
}


#menu .entry a:hover {
    color: #6f3f81;
    text-decoration: none;
}

我认为只是通过将它们放在具有相同背景颜色的嵌套容器中并以元素列表为中心来创建类似的效果，但如果没有其他JS代码，这将无法工作，因为第一个和最后一个元素必须更改颜色徘徊。

是否有适合的CSS解决方案？

Answer 1

我知道的唯一可靠的解决方案是display:flex ... 将display:flex提供给容器，将flex: 1 0提供给您想要增长的元素。确保包含WebKit和moz前缀以实现兼容性。 请注意，此布局模型相当新，不适用于旧版浏览器。

Answer 2

嗯，我能想到的最简单的解决方案是： 给出第一个和最后一个“li”

width:15%;

你可以玩这个号码。这样，无论屏幕的宽度如何，它们总是占用相同的空间。