Question

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

小提示演示问题：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>填充容器的整个宽度？

Answer 1

请参阅 fiddle 。

使用HTML caption元素：

<div id="one">    

    <table>
        <caption>
            <h1>header</h1>
        </caption>
        <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;        
    margin-top: 0;
    text-align: left;
}

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

Answer 2

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

您可以做的不是#one overflow: auto，而是将DIV内的overflow: auto包裹在#one内。这样，{{1}}保持固定宽度，但表格周围的包装允许内容水平滚动。

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

Answer 3

试试这个：

<强> 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;
    position:relative;
}

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

h1:after {
     content:"";
     background: blue;
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
    left:100%
 }

fiddle

Answer 4

更改此CSS代码，如下所示，然后检查并告诉我您是否需要：

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

块级元素填充溢出x：滚动容器的100％宽度

4 个答案: