Question

我希望div容器使用水平滚动条扩展到整个HTML页面，这里有一张显示我问题的图片。

当需要水平滚动条时，div容器不会延伸。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type='text/x-mathjax-config'>
            MathJax.Hub.Config({
                showMathMenu: false,
                jax: ['input/TeX','output/HTML-CSS'],
                displayAlign: "left",
                extensions: ['tex2jax.js','toMathML.js'],
                TeX: { extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'] },
            });
        </script>
        <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
        <style>
            .titulo{
                width:100%;
                border-bottom:solid 2px;
                border-color: black;
                background-color:lightgrey;
                font-family:arial;
                font-weight:bold;
                white-space:nowrap;
            }
        </style>
    </head>

    <body>
        <div class="titulo">Data</div>
        <div>$$\vec{v_r}=\vec{v_1}+\vec{v_2}\\\vec{v_r}=\left(x_1+x_2,\;y_1+y_2\right)$$</span>
        <div class="titulo">Operations</div>
        <div>$$\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000,\;3000000\right)+\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000+500000,\;3000000+2000000\right)\\\vec{v_r}=\left(1500000,\;5000000\right)$$</div>
    </body>
</html>

我该如何解决这个问题？我使用MathJax显示数学公式，我不知道它是否在干扰。

Answer 1

当您为外部div提供width:100%时，它会占用100% of the window / document width.但是因为您的1 div文本不是wrapping（中间没有空格）所以div不在viewport所以你得到horizontal scrollbar。所以要避免包装你的文字，例如。 word-wrap: break-word;使用此css property文本即将发布。

enter image description here

如何使用水平滚动条使div容器扩展到整个HTML页面

1 个答案: