Question

我正在个人网站上工作，我遇到了一个问题：使用CSS和容器将列表居中后，页面比显示器宽，导致水平滚动条。为什么是这样？相关代码：

HTML：

<h2>My Stack:</h2>
<div class="list">
<ul class="list-unstyled">
    <li>Vim</li>
    <li>Git</li>
    <li>Zsh</li>
    <li>Byobu</li>
</ul>
</div>

CSS：

body {
    margin: 0 2em 0 2em;
    font-size: 18px;
    width: 100%;
}
h1, h2, h3, h4, h5, h6, h7 {
    text-align: center;
}
p, div.list{
    text-align: center;
}
ul {
    display: inline-block;
}

实时复制：https://www.k7dxs.xyz/linux.php

理论上，导航栏应该压缩，文本应该换行，对吧？为什么不起作用？

Answer 1

由于身体上的2em边缘，为了弥补你可以使用4em，这将设置100％宽度减去body { margin: 0 2em 0 2em; font-size: 18px; width: calc(100% - 4em); }身体边缘。

请参阅小提琴：https://jsfiddle.net/5wwg1q5j/55/

  <h:form id="request">
            <p:dataTable value="#{dataTableView.employeeList}" id="Employee" var="emp"
                         selection="#{dataTableView.selectedEmployees}" rowKey="#{emp.id}">
            <p:ajax event="rowSelectCheckbox" listener="#{dataTableView.EnableInputText}" />
        <p:ajax event="rowUnselectCheckbox" listener="#{dataTableView.EnableInputText}" />

    <p:columnGroup type="header">
        <p:row>
           <p:column/>
           <p:column headerText="ID"/>
           <p:column headerText="Name"/>
           <p:column headerText="Location"/>
           <p:column headerText="Remarks"/>
        </p:row>
    </p:columnGroup>
        <p:column selectionMode="multiple" style="width:2%;text-align:center"/>
                <p:column headerText="ID">
                    <h:outputText value="#{emp.id}"/>
                </p:column>
                <p:column headerText="Name">
                    <h:outputText value="#{emp.name}"/>
                </p:column>
                <p:column headerText="Location">
                    <h:outputText value="#{emp.location}"/>
                </p:column>
                <p:column headerText="Remarks">
                    <h:inputText id="inputT1" value="#{emp.remarks}" disabled="#{emp.disable}"/>
                </p:column>
            </p:dataTable>
        </h:form>

Answer 2

您获取水平滚动条的原因是您的身体比视口大。默认情况下，宽度由＆＃34; content-box＆＃34;设置。因此，如果您的<body>代码包含以下CSS：

width: 100%;
margin: 0 2em 0 2em;

...这意味着body标签将是100％加 2em margin（两次）。请记住，该边距也会添加到元素的外部。

您可以将默认的大小调整更改为box-sizing: border-box;。这将计算div的宽度，包括边框，边距和填充。

Answer 3

这是因为你的身体有左右边距，但同时宽度是100％所以它会延伸100％的窗口宽度。

删除此行：

margin: 0 2em 0 2em;

然后它应该在没有水平滚动条的情况下适合100％。

Answer 4

您需要从margin代码中删除body CSS：

body {
    // margin: 0 2em 0 2em; <-- remove this
    font-size: 18px;
    width: 100%;
}
div.main {
    margin: 0 2em 0 2em;
}

将您的内容换成container-fluid代替：

<div class="container-fluid main">
    <nav class="navbar navbar-default">
        <!-- the nav -->
    </nav>
</div>

为什么这个页面比显示屏宽？

4 个答案: