Question

前言：我一般不是一个UI人，所以请原谅我，如果我对CSS有很大的误解。请知道这个问题是经过几个小时的研究/我的头撞墙：）

基本上我要做的是将未知数量的元素拉伸到未知宽度的空间中，在已知的两个元素之间 width，全部位于宽度可变的容器内，位于页面内部。

我意识到当我输入它时所有人都听起来很疯狂，所以让我试着用图形方式来做这件事：

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

其中：

#container居中，占据文档宽度的80％
#logo，#menu和#social均包含在<div/> s
#logo和#social已知宽度; #menu不
| A | ... | N | <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个菜单项延伸到#logo和#social元素之间的剩余空间。它们或者最终一起被粉碎，或者它们占据#container分配给他们的80％的100％。

我已尝试过的一些事情：

使用display: inline-table;（fiddle）
以内联方式显示<li/>元素，并为#menu元素提供100％的宽度（fiddle）
这些

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

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

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

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

Answer 1

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

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

这对你意味着什么？

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

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

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

参见此演示：

http://jsfiddle.net/5RvCC/

表格单元格样式元素的一个很好的好处是它们允许display: table-cell;属性，这使得垂直居中非常容易，这似乎总是一个常见的问题。

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

1 个答案: