无法将我的导航栏移动到中心/更改其大小并且页面溢出答案

【问题标题】：can't move my nav bar to the center/change its size and the page overflows无法将我的导航栏移动到中心/更改其大小并且页面溢出
【发布时间】：2018-08-23 11:05:24
【问题描述】：

所以我无法更改导航栏的大小。我也不能把它移到中心。即使我将正文宽度和高度设置为 100vw 和 100vh，我也可以向下和向两侧滚动页面。有人可以帮忙吗？

我的代码：

body {
    background-color: black;
    width: 100vw;
    height: 100vh;
    display: inline block;
}

h1 {
    font-family: 'Anton', sans-serif;
    color: white;
    font-size: 108px;
    text-align: center;
}

div {
    width: 2000px;
    height: 500px;
    display: inline block;
}

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="KinoWorld homepage" content="html/css file">
        <meta name="viewport" content="width=device-width, initial-scale=1">

         <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>Stuff</h1>
        <div class="search">
            <input type="text" placeholder="Search..">
        </div>
    </body>
</html>

【问题讨论】：

什么navbar？在哪里？你指的是div搜索吗？

标签： html css node.js frontend

【解决方案1】：

仅仅因为您将主体设置为100vw 的宽度并不会将子元素限制为100vw。您可以在 body 上设置 overflow-x: hidden，或者更好的是，在子元素上使用适当的样式。

对于您的 div，尽量避免使用像素宽度，但如果必须，请设置 max-width: 100%;，这样它们就不会溢出其父级。您还有一个拼写错误display: inline block; 需要连字符。虽然您不需要将此元素设为inline-block;，但作为block 级别元素就可以了。

此外，默认情况下正文为100vw，您可以将其设置为max-width 值，这将有助于它是否被框住（如下面的sn-ps），但通常没有必要。

如果您有一个小页面，并且希望它“无论如何都是整页”，请将其设置为min-height: 100vh，很少有理由将其总高度限制为100vh。

使inline 或inline-block 元素（您的搜索输入）居中的最简单方法是在父元素上设置text-align: center;。另请注意，在语义上，您应该使用 <input type="search"> 搜索表单元素。

* { box-sizing: border-box; }

body {
    background-color: black;
    max-width: 100vw;
    min-height: 100vh;
    display: inline block;
    margin: 0;
}

h1 {
    font-family: 'Anton', sans-serif;
    color: white;
    font-size: 108px;
    text-align: center;
}

div {
    max-width: 100%;
    width: 2000px;
    height: 500px;
    text-align: center;
}

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="KinoWorld homepage" content="html/css file">
        <meta name="viewport" content="width=device-width, initial-scale=1">

         <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>Stuff</h1>
        <div class="search">
            <input type="search" placeholder="Search..">
        </div>
    </body>
</html>

【讨论】：