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

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

css layout

Css 将元素拉伸到两个固定宽度元素之间的未知宽度,css,layout,overflow,tablelayout,centering,Css,Layout,Overflow,Tablelayout,Centering,前言：我一般不喜欢UI，所以如果我对CSS有严重误解，请原谅我。请知道，这个问题是在几个小时的研究/我的头撞在墙上之后提出的：）本质上，我试图做的是将未知数量的元素拉伸到一个未知宽度的空间中，在两个已知宽度的元素之间，所有这些元素都在一个可变宽度的容器中，以页面为中心当我打字时，我意识到这一切听起来有多疯狂，所以让我试着用图形的方式来做： html |-----------------------------------------------------------------------

前言：我一般不喜欢UI，所以如果我对CSS有严重误解，请原谅我。请知道，这个问题是在几个小时的研究/我的头撞在墙上之后提出的：）

本质上，我试图做的是将未知数量的元素拉伸到一个未知宽度的空间中，在两个已知宽度的元素之间，所有这些元素都在一个可变宽度的容器中，以页面为中心

当我打字时，我意识到这一切听起来有多疯狂，所以让我试着用图形的方式来做：

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

其中：

```
#容器
```
居中，占文档宽度的80%
```
#徽标
```
、
```
#菜单
```
和
```
#社交
```
都包含在
中
```
#logo
```
和
```
#social
```
的宽度已知<代码>菜单不可用

|A |

|N |

是

中的元素的未知数量


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
元素之间的剩余空间。它们要么最终被挤在一起，要么占了#容器分配给它们的80%的100%
一些我已经尝试过的事情：

使用显示：内联表（）

内联显示
元素，并为#菜单
元素提供100%的宽度（）
这上面有很多变化

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

将菜单项放入
任何类型的JavaScript方法
使用CSScalc（）
函数

最后一点注意：我并不担心这些菜单项在分配给它们的空间中没有足够的空间。但是，如果它们溢出，我希望它们溢出到#菜单
中的另一行（即A
菜单项下）
必须有一个纯CSS解决方案来解决这个问题。。。它是什么？
您不想使用
元素是对的，因为它不是语义的。。但这就是为什么CSS有一组属性，使元素看起来像表元素，同时保留其语义含义
基本上，如果将容器元素设置为display:table，然后可以将子元素设置为显示：表行或显示：表格单元格
这对你意味着什么
除非明确设置，否则一组表格单元格将始终填充到父单元格的100%宽度，以及父单元格的100%高度，这通常由最大的子单元格决定
因此，考虑到这一点，如果要将header元素#header
设置为display:table
，然后可以将#logo
、#nav
和#social
设置为显示：表格单元格。在徽标和社交区块上设置固定宽度将受到尊重，因此会导致导航区块填满剩余空间
导航块内的无序列表可作为第二个容器。。再次设置为display:table，允许其内容填充至导航块的全宽。只需将li
元素设置为display:table单元格也是如此，您应该可以获得所需的效果
请参阅此演示：


表格单元格样式元素的一个很好的优点是，它们允许垂直对齐
属性，这使得垂直居中非常容易，这似乎总是一个常见的问题
我从未想过使用表格布局显示整个标题。这个解释很有道理。。。非常感谢；你是救命恩人！