使第一和最后一个子占据剩余的横向空间

我需要其中元素是唯一一样宽，需要（基于文本的宽度）链接水平列表，但第一个和最后一个元素占据所有剩余空间：使第一和最后一个子占据剩余的横向空间

enter image description here

我知道该怎么做，所以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解决方案呢？

来源

2014-02-12 magnattic

你想“自动填充”菜单，使每边没有空间吗？所以不管你有多少个按钮，每一边都不会有间距。 –

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

来源

2014-02-12 18:20:32 Mabedan

完美，谢谢。 – magnattic

嗯，我能想到的最简单的方法是这样的：给第一个和最后一个“礼”

width:15%;

你可以玩的数量。这样，无论屏幕的宽度如何，它们总是会占据相同的空间。

来源

2014-02-12 19:49:08 erkinyldz

使第一和最后一个子占据剩余的横向空间

回答

相关问题