将元素拉伸到两个固定宽度元素之间的未知宽度答案

【问题标题】：Stretch Elements Into Unknown Width Between Two Fixed-Width Elements将元素拉伸到两个固定宽度元素之间的未知宽度
【发布时间】：2013-11-01 03:35:45
【问题描述】：

前言：我一般不是 UI 专家，如果我对 CSS 有严重的误解，请原谅我。请知道，这个问题是经过几个小时的研究/把我的头撞到墙上的:)

基本上我要做的是将 unknown 数量的元素拉伸到 unknown 宽度的空间中，在 known 的两个元素之间em> 宽度，都在一个可变宽度的容器内，在页面内居中。

我在打字时意识到这一切听起来多么疯狂，所以让我尝试以图形方式执行此操作：

html
|-------------------------------------------------------------------------|
|   #container                                                            |
|   |-----------------------------------------------------------------|   |
|   |#header                                                          |   |
|   ||---------------------------------------------------------------||   |
|   || #logo   | #menu                                     | #social ||   |
|   ||         | |---|  |---|  |---|                 |---| |         ||   |
|   ||         | | A |  | B |  | C |  ...  ...  ...  | N | |         ||   |
|   ||         | |---|  |---|  |---|                 |---| |         ||   |
|   ||---------------------------------------------------------------||   |
|   |                                                                 |   |
|   |#body                                                            |   |
|   ||---------------------------------------------------------------||   |
|   ||                                                               ||   |
|   ||---------------------------------------------------------------||   |
|-------------------------------------------------------------------------|

地点：

#container 居中，占文档宽度的 80%
#logo、#menu 和 #social 分别包含在 <div/>s 中
#logo 和 #social 具有已知宽度； #menu 没有
| A |...| N | 是<ul/> 中未知数量的<li/> 元素

HTML 看起来像：

<body>
    <div id="container">
        <div id="header">
            <div id="logo">Logo here</div>

            <div id="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </div>

            <div id="social"><a href="#">Link</a><a href="#">Link</a></div>

        </div>
        <div id="body">&nbsp;</div>
    </div>
</body>

尽我所能，我无法让A..N 菜单项跨越#logo 和#social 元素之间的剩余空间。它们要么最终被挤在一起，要么占据#container 分配给它们的 80% 的 100%。

我已经尝试过的一些事情：

使用display: inline-table; (fiddle)
内联显示 <li/> 元素，并为 #menu 元素提供 100% 的宽度 (fiddle)
这些的一堆变体

我不能/不会考虑做的事情：

将菜单项存放在<table/>
任何类型的 JavaScript 方法
使用 CSS calc() 函数

最后一点：我不担心这些菜单项在分配给它们的空间中没有足够的空间。但是，如果它们确实溢出，我希望它们会溢出到 #menu 内的另一行（即在 A 菜单项下方）。

必须有一个纯 CSS 解决方案...这是什么？

【问题讨论】：

标签： css layout overflow tablelayout centering

【解决方案1】：

你不想使用<table> 元素是对的，因为它没有语义。但这就是为什么 CSS 有一组属性可以让元素看起来像表格元素，同时保留它们的语义含义。

基本上，如果将容器元素设置为display: table;，则可以将子元素设置为display: table-row; 或display: table-cell;

这对你意味着什么？

嗯，一组表格单元格将始终填充到父级的 100% 宽度，以及父级的 100% 高度，这通常由最大的子级决定，除非明确设置。

因此，考虑到这一点，如果要将标题元素 #header 设置为 display: table;，则可以将 #logo、#nav 和 #social 设置为 display: table-cell;。在徽标和社交块上设置固定宽度将得到尊重，因此会导致导航块填充剩余空间。

导航块内的无序列表ul 可以充当第二个容器。再次设置为display: table;，允许其内容填充到导航块的整个宽度。只需将li 元素也设置为display: table-cell;，您应该会得到想要的效果。

看这个演示：

http://jsfiddle.net/5RvCC/

表格单元样式元素的一个很好的好处是它们允许vertical-align 属性，这使得垂直居中变得超级容易，这似乎一直是一个常见的问题。

【讨论】：

我从没想过使用表格布局来显示整个标题。这个解释很有道理……非常感谢；你是救生员！