Question

我有一个标题和导航栏（附加），然后是2个输入框。当我将屏幕调整到较小的分辨率时，滚动条会水平显示（这很奇怪，因为页面上的所有内容都是可见的而无需滚动），当我移动此滚动条时，我的标题（宽度为100％）会切断，我只是看到它下面的背景。我以前在多个网站遇到过这个问题，我该如何解决？我的代码如下。

资产/ header.php文件

<html>
<link rel="stylesheet" type="text/css" href="/blog/assets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/assets/style.css">
<head>

</head>
<body>
  <div class="header"><br><br><br>
    <p>My Blog</p>
  </div>
  <div class="topnav" align="center">
    <a href="/">HOME</a>
    <a href="./latest">LATEST</a>
    <a href="./all">ALL</a>
    <a href="./about">ABOUT</a>
    <a href="./about">SEARCH</a>
  </div>

资产/ style.css中

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
   background-color: #D3D3D3;
   margin: 0 0 100px;
   font-family: "PT-Sans", sans-serif;
}

.header {
  display: block;
  width: 100%;
  height: 200px;
  background-image: url("./img/header-img.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-size:cover;
  background-position: center center;
}

.topnav {
    background-color: #333;
    overflow: hidden;
    position: relative;
    top: 0;
}

.topnav a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 100px;
    text-decoration: none;
    font-size: 17px;
    text-align: center;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
.header p {
  color: white;
  font-size: 50px;
  text-align: center;
  vertical-align: middle;
  font-family: 'Indie Flower', cursive;
}

的index.php

<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Create Blog</title>
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>

的style.css

.input {
  width: 50%;
}
.form {
  position: relative;
  left: 25%;
}

Answer 1

在样式表中添加此内容以填充标题100％

.header{
    width: 100%;
    margin-left: 0!important;
    margin-right: 0!important;
}

Answer 2

检查是否先访问该css文件。如果是，那么请使用以下

.header {
    display: block;
    width: 100% !important;
    height: 200px;
    background-image: url("./img/header-img.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-size:cover;
    background-position: center center;
}

如果仍然无法正常工作，请逐一添加行并查看效果。

如果您需要任何进一步的帮助，请告诉我

Answer 3

.form {
    position: relative;
    /* left: 25%; */
    margin: 0 auto;
    text-align: center;
}

Answer 4

如果margin属性有三个值：

保证金：25px 50px 75px; 最高保证金是25px 左右边距为50px 下边距为75px

所以更改你的身体标签以删除左边距和右边距，这可能就是为什么没有填充整个宽度

Answer 5

我测试了这个并且它工作了。当探索的大小变小而没有任何水平滚动条

<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
    <style>
        .input {
          width: 50%;
        }
        .form {

          left: 25%;
        }
            </style>
        </head>
        <body>
        <continer>
          <div class="header"><br><br><br>
            <p>My Blog</p>
          </div>
          <div class="topnav" align="center">
            <a href="/">HOME</a>
            <a href="./latest">LATEST</a>
            <a href="./all">ALL</a>
            <a href="./about">ABOUT</a>
            <a href="./about">SEARCH</a>
          </div>
            <div class="form" style=" text-align: center;">
                    <form action="send.php" method="POST" class="form">
                    <input type="text" name="title" placeholder="Title" class="input"><br>
                    <textarea name="blog-text" placeholder="Blog" class="input"></textarea>
                    </form>
           </div>
        </continer>
        </body>
        </html>

Answer 6

这里有很多东西看起来不对，但是我把你的代码整理成一个文档用于测试目的，看起来表单正在推到一边，这样会使页面宽度变宽，因此允许你的标题要扩大。

所以你需要删除左边：25％来自表格或者给它宽度小于75％。

你需要小心维护干净的代码，看起来你最终会得到两个来自你发布的标题的“头”标签，其中一个不需要，另一个没有正确关闭。

100％标题宽度不填充100％宽度？

6 个答案: