1

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

本质上，我要做的是将未知数量的元素拉伸到未知宽度的空间中，在两个已知宽度的元素之间，所有元素都在一个可变宽度的容器内，在页面内居中。

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

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

在哪里：

  • #container居中，占文档宽度的 80%
  • #logo, #menu, 和#social都包含在<div/>s
  • #logo并且#social具有已知的宽度；#menu才不是
  • | A |...| N |是 a 中未知数量的<li/>元素<ul/>

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之间的剩余空间。他们要么最终被挤在一起，要么占据了 80% 分配给他们的 100% 。#logo#social#container

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

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

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

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

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

必须有一个纯 CSS 解决方案……它是什么？

4

1 回答 1

3

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

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

这对你意味着什么？

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

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

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

看这个演示：

http://jsfiddle.net/5RvCC/

  • 表格单元样式元素的一个不错的好处是它们允许使用vertical-align属性，这使得垂直居中变得超级容易，这似乎一直是一个常见的问题。
于 2013-10-23T03:23:11.423 回答