让块级元素填充溢出x的100％宽度：滚动容器 [英] Have block level element fill 100% width of overflow-x: scroll container

问题描述

我有一个具有一定宽度的容器元素，其中 overflow-x：auto 。在其中，我有一个块级标头元素（h1），它应该是一个块元素，水平填充容器。只要容器中没有其他元素溢出，它就会创建水平滚动条。如果存在溢出元素，则标头元素仅填充容器的非溢出水平空间，而不会出现在溢出空间中。

I've got a container element that's a certain width, with overflow-x: auto. In it I have a block level header element (h1) that's supposed to, being a block element, fill the container horizontally. And it does so, as long as there are no other elements in the container that overflow, creating a horizontal scrollbar. If there are overflowing elements, then the header element fills only the non-overflowing horizontal space of the container, but doesn't appear in the overflowing space.

小提琴展示了问题： http://jsfiddle.net/rand0mbits/qUh3s/

HTML：

<div id="one">
    <h1>header</h1>
    <table><tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td>
    <td>text</td></tr></table>
</div>

CSS：

#one {
    width: 200px;
    overflow: auto;
    border: solid 1px;
}

#one h1 {
    font-size 1.1em;
    background-color: blue;
    display: inline-block;
    width: 100%;
    margin-top: 0;
}

table td {
    border: solid 1px;
    padding: 20px;
}

我如何制作< h1> 填满容器的整个宽度吗？

How do i make the <h1> fill the whole width of the container?

推荐答案

H1 将继承其父元素的宽度，因为它是相对的，因此它最终总是与您设置 #one 的宽度相同。

The H1 is going to inherit the width of its parent element since it's relative, so it will always end up being the same width you set #one to.

您可以做的是代替 #one 发生溢出：自动，将表格包装在另一个 DIV 内，其中溢出：自动。这样， #one 保持固定的宽度，但是表周围的包装器允许内容水平滚动。

What you can do is instead of #one having overflow: auto, wrap the table inside another DIV with overflow: auto. This way, #one stays a fixed width, but the wrapper around the table, allows the content to scroll horizontally.

jsfiddle： http://jsfiddle.net/yetti/Ggua5/

jsfiddle: http://jsfiddle.net/yetti/Ggua5/

这篇关于让块级元素填充溢出x的100％宽度：滚动容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！