html - CSS：显示水平滚动条时不应用背景颜色

Question

这个标记

<div style="background-color: red;">
    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</div>

当浏览器窗口足够宽时可以正常工作，但是当我将其缩小以查看水平滚动条时，背景颜色仅应用于可见部分：

这可以解决吗？

Answer 1

试试看position:absolute;

<div style="background-color: red; position:absolute;">
    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</div>

编辑 ：

或与display:inline;

<div style="background-color: red; display:inline;">
    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</div>

Answer 2

尝试一种方法是使用position:absolute.

<div style="background-color: red;position: absolute;">
    <p>abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
</div>

其他方式是使用一些width.

<div style="background-color: red;width: 500px">
    <p>abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
</div>

Answer 3

尝试：

<div>
<p style="background-color:red;">
abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>

Answer 4

<div style="background-color: red;display:table">
    abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd
</div>

虽然不支持IE7。