Question

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

我的代码：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

仅仅因为您将正文设置为宽度100vw并不会将子元素限制为100vw。你要么想在身上设置overflow-x: hidden，要么更好，在子元素上使用适当的样式。

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

此外，默认情况下正文为100vw，您可以将其设置为max-width值，如果它被框住（如下面的代码段），它会帮助它，但通常它不是必要的。

如果您有一个小页面，并且希望它是“完整页面，无论如何”，请将其设置为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>

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

1 个答案: