css 为什么要加一个水平滚动条

lmyy7pcs  于 2023-05-02  发布在  其他
关注(0)|答案(1)|浏览(219)

我得到一个水平滚动条,我不知道为什么。我已经尽可能地把它简化了。但这里有很多。但这样我就提供了我认为相关的一切。
如果我还有什么要补充的,请告诉我。有没有一种方法可以让浏览器提供一个单独的css文件,包含与页面相关的所有内容?如果沿着呈现的html之外,还有一种方法可以提供一个单独的css,那就太好了。
网页基本上是一个<h3>和一个只有一个控件的窗体。我给表单一个蓝色边框来显示表单不是问题所在。这是滚动到左边的网页。

这里是完全滚动的

正如你所看到的,表单的宽度是浏览器的宽度,所以它不会导致滚动条--除非有什么东西在表单的右边增加了边距,而我找不到。表格的左边绝对没有空白。
下面是原始的html(浏览器视图页面源代码):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css?v=coGWgpNGDM1Wzc18lTxde46RTppTfW9Oz4m8mCTmpf0" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="css/menu.css" rel="stylesheet" />
    <link href="LouisHowe.web.styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <script src="/js/Interop.js"></script>
</head>
<body>
    <main b-jv8gxb7csr>
        <div class="my-main-scrollbar" b-jv8gxb7csr>
            <h3>Dashboard</h3>
            <form style="border: 5px solid blue;">
                <div id="idfdca2d08-f895-43e0-922c-d655c9bb9588" class="dxbl-fl dxbl-fl-loading">
                    <div class="dxbl-row">
                        <dxbl-form-layout-item class="dxbl-col-md-12 dxbl-col dxbl-fl-item dxbl-fl-item-horizontal" id="id31058717-b0c5-4528-9b0f-2142faf1d24d">
                            <label class="dxbl-fl-cpt dxbl-text">
                                Full name:
                            </label>
                            <div class="dxbl-fl-ctrl">
                                <dxbl-input-editor id="id955558a4-4ae4-44e2-bd8a-ee978babe2f6" class="valid dxbl-text-edit" bind-value-mode="OnLostFocus">
                                    <input name="id955558a4-4ae4-44e2-bd8a-ee978babe2f6" autocomplete="off" type="text" id="idaab9cdbd-47f2-4b14-a075-5c553a2c28f5"></input>
                                </dxbl-input-editor>
                            </div>
                        </dxbl-form-layout-item>

                    </div>
                </div>
            </form>
        </div>
    </main>
    <div id="blazor-error-ui">
        An unhandled exception has occurred. See browser dev tools for details.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js"></script>
    <script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData" data-requestId="2611f4ebf7d54be7a31d7c9120f10b14" data-requestMappingFromServer="false" data-connectUrl="http://localhost:65118/e19ec81e873b426a9ed54d25b9b587bc/browserLink"></script>
    <script src="/_framework/aspnetcore-browser-refresh.js"></script>
</body>
</html>

下面是<body>的计算css

对于<main>

对于<div class="my-main-scrollbar">

对于表单

我找不到任何能增加那一点点宽度的东西。但有点奇怪。如果EditForm设置为width:99%,则没有滚动条。所以它在表单的右边添加了一些东西。但是什么/怎么做?

1yjd4xko

1yjd4xko1#

好的,我已经能够创建一个可能的最小可重复的示例:

<div style="height:500px;width:100%;background-color:blue">
    <EditForm Model=Main>
        <div style="width:100%; border: 1px solid black; background-color:pink; margin:2px;">Some stuff</div>
    </EditForm>
</div>

我认为您会发现一个或多个dxbl类具有非0边距,这很有意义,因为它们显然是列格式化程序。

相关问题