为什么我的网页有这么大的空白

【问题标题】：Why is there this huge margin in my webpage为什么我的网页有这么大的空白
【发布时间】：2021-12-28 02:21:03
【问题描述】：

我刚刚做了一个 for 并且我试图将 2 个 div 并排放置在另一个 div 中，但是有很大的余量不会让它发生我试图弄清楚但我做不到得到任何工作。请帮助我，我已经尝试了好几个小时。 https://i.stack.imgur.com/JHAT1.png

只需查看 CSS 部分中的 /联系页面/，这是我要修复的唯一代码。它只在底部。

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
  color: #ffffff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #222;
}

nav {
  display: flex;
  height: 120px;
  width: 100%;
  background: #192841;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
}
nav .logo {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li {
  margin: 0 5px;
}
nav ul li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
  color: #111;
  background: #fff;
}
nav .menu-btn i {
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"] {
  display: none;
}
@media (max-width: 1000px) {
  nav {
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i {
    display: block;
  }
  #click:checked ~ .menu-btn i:before {
    content: "\f00d";
  }
  nav ul {
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul {
    left: 0;
  }
  nav ul li {
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a {
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a {
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover {
    background: none;
    color: cyan;
  }
}

/* Footer */

.footer {
  text-align: center;
  display: inline-block;
  bottom: 0;
  width: 100%;
  height: 50px;

  padding-bottom: 1%;
}

.footer {
  height: 100%;
}

/* Footer */

/*home page*/

.contentHeader {
  text-align: center;
  z-index: -1;
  width: 100%;
  padding-top: 2%;
  color: #1b1b1b;
  font-size: 30px;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .contentHeader {
    text-align: center;
    z-index: -1;
    width: 100%;
    padding-top: 10px;
    color: #1b1b1b;
    padding: 2%;
    padding-left: 5%;
    padding-right: 5%;
  }
}

.AboutOnHomepage {
  padding: 5% 10%;
  padding-top: 2%;
  padding-bottom: 4%;
  width: 100%;
  text-align: justify;
  align-items: center;
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .AboutOnHomepage {
    padding-top: 15%;
    width: 100%;
    text-align: justify;
    height: 100px;
    text-align: center;
  }

  .AboutOnHomepage p {
    text-align: justify;
  }
}

.AboutOnHomepage h2 {
  white-space: nowrap;
}

.mainUpdate {
  padding-left: 10%;
  padding-right: 10%;
}

@media screen and (max-width: 768px) {
  .mainUpdate {
    width: 100%;
  }
}

.recentUpdates {
  padding-bottom: 3%;
  text-align: center;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  .recentUpdates {
    padding-top: 20%;
  }
}

.up1Home {
  text-align: center;
  font-size: 18px;
  font-weight: lighter;
}
.up2Home {
  text-align: center;
  padding-top: 3%;
  font-size: 18px;
  font-weight: lighter;
}
.up3Home {
  text-align: center;
  padding-top: 3%;
  font-size: 18px;
  font-weight: lighter;
}

.updateHome1 {
  text-align: center;
  width: 100%;
  padding-bottom: 3%;
  margin-top: 0%;
  border-bottom: 1px solid white;
}

.par1 {
  padding-top: 2%;
  padding-left: 5%;
}

.img1 {
  text-align: center;
  padding-top: 2%;
  width: 100px;
  height: 100px;
}

@media screen and (max-width: 768px) {
  .updateHome1 {
    width: 100%;
    margin-top: 2.5%;
    margin-bottom: 20px;
  }
  .par1 {
    margin-left: 10px;
  }
  .img1 {
    margin-top: 12%;
    margin-bottom: 10%;
    width: 150px;
    height: 100px;
  }
}

.updateHome2 {
  text-align: center;
  padding-bottom: 3%;
  margin-top: 0%;
  border-bottom: 1px solid white;
}

.par2 {
  text-align: center;
  padding-top: 2%;
}

.img2 {
  text-align: center;
  margin-top: 2%;
  width: 100px;
  height: 100px;
}

@media screen and (max-width: 768px) {
  .updateHome2 {
    width: 100%;
    margin-top: 2.5%;
    margin-bottom: 20px;
  }
  .par2 {
    margin-left: 10px;
  }
  .img2 {
    margin-top: 12%;
    margin-bottom: 10%;
    width: 150px;
    height: 100px;
  }
}

.updateHome3 {
  text-align: center;
  padding-bottom: 10%;
  margin-top: 0%;
}

.par3 {
  padding-top: 2%;
  float: left;
  margin-left: 10px;
}

.img3 {
  text-align: center;
  margin-top: 2%;
  width: 100px;
  height: 100px;
}

@media screen and (max-width: 768px) {
  .updateHome3 {
    width: 100%;
    margin-top: 2.5%;
    margin-bottom: 20px;
  }
  .par3 {
    margin-left: 10px;
  }
  .img3 {
    margin-top: 12%;
    margin-bottom: 10%;
    width: 150px;
    height: 100px;
  }
}

/*home page*/

/*Google form*/

@media screen and (max-width: 768px) {
  .content {
    padding-bottom: 10%;
  }
}

.googleFormHeading {
  text-align: center;
  z-index: -1;
  width: 100%;
  padding-top: 2%;
  color: #1b1b1b;
  font-size: 30px;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .googleFormHeading {
    text-align: center;
    z-index: -1;
    width: 100%;
    padding-top: 2%;
    color: #1b1b1b;
    font-size: 30px;
    font-weight: 400;
    padding-left: 5%;
    padding-right: 5%;
  }
}

.bothGoogleForms {
  padding-top: 3%;
  display: inline-block;
  text-align: center;
  width: 100%;
}

.googleFormTv {
  padding-left: 4%;
  display: inline-block;
}

.googleFormTv iframe {
  width: 700px;
  height: 900px;
  text-align: center;
  display: inline-block;
}

.googleFormMovie {
  padding-left: 3%;
  display: inline-block;
  margin-bottom: 10%;
}

.googleFormMovie iframe {
  width: 700px;
  height: 900px;
  text-align: center;
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .bothGoogleForms {
    text-align: center;
    width: 100%;
  }

  .googleFormTv {
    text-align: center;
    width: 90%;
    padding-bottom: 11%;
    border-bottom: 1px solid white;
  }

  .googleFormTv iframe {
    width: 100%;
    padding-left: 2%;
    height: 976px;
  }

  .googleFormMovie {
    text-align: center;
    width: 100%;
    padding-top: 11%;
    margin-bottom: 15%;
  }

  .googleFormMovie iframe {
    padding-left: 2%;
    width: 90%;
    height: 976px;
  }
}

/*Google form*/

/*Contact Page*/

.ContactPageAll {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  display: inline-block;
}

.contactForm {
  color: #111;
  text-align: left;
  width: 30%;
}

.contactForm input,
textarea,
label {
  display: block;
  color: #ffffff;
}

.contactForm input,
textarea,
button {
  display: block;
  padding: 4%;
  width: 120%;
  background-color: white;
  color: #111;
}

.contactFormName {
  padding-bottom: 2%;
  font-size: 20px;
}

.socials {
  width: 55%;
  display: inline-block;
}

/*Contact Page*/ ;
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Responsive Navigation Menu</title>
    <link rel="stylesheet" href="../style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <nav>
      <div class="logo"> Reviews</div>
      <input type="checkbox" id="click" />
      <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>
      </label>
      <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a href="googleForm.html">Google Form</a></li>
        <li><a href="myMovies.html">Movies</a></li>
        <li><a href="myTvShows.html">Tv-Shows</a></li>
        <li><a href="topMovies.html">Top Movies</a></li>
        <li><a href="topTvShows.html">Top Tv-Shows</a></li>
        <li><a class="active" href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <div class="ContactPageAll">
      <div class="socials">fklghliabgljglabg</div>
      <div class="contactForm">
        <form action="https://formsubmit.co/myemail@aol.com" method="POST">
          <label class="contactFormName" for="name">Name:</label>
          <input
            type="text"
            name="name"
            required
            placeholder="Enter Your Name"
          />

          <label class="contactFormEmail" for="Email">Email:</label>
          <input
            type="email"
            name="email"
            required
            placeholder="Email Address"
          />

          <label
            class="contactForMessage"
            for="message"
            placeholder="Write Your Message here"
            >What Do You Want to Say:</label
          >
          <textarea
            name="message"
            id="message"
            placeholder="Write Your mEssage here"
            cols="30"
            rows="10"
          ></textarea>

          <input
            type="hidden"
            name="_subject"
            value="New submission From My website"
          />
          <input
            type="hidden"
            name="_next"
            value="https://sunnymoon25.github.io/mainPages/thanks.html"
          />
          <input type="hidden" name="_captcha" value="false" />
          <button type="submit">Send</button>
        </form>
      </div>
    </div>
  </body>
</html>

只需查看 /联系页面/ 部分，这是我要修复的唯一代码

【问题讨论】：

  • 你能对我的回答做正确的回答吗

标签： html css margin


【解决方案1】：

这不是你给的实际宽度的边距

如果你想并排 div 所以你需要在下面添加 html 和 CSS 以便你得到你想要的输出。

<div class="ContactPageAll">
      <div class="socials">fklghliabgljglabg</div>
      <div class="contactForm">
        <form action="https://formsubmit.co/myemail@aol.com" method="POST">
          <label class="contactFormName" for="name">Name:</label>
          <input type="text" name="name" required="" placeholder="Enter Your Name">

          <label class="contactFormEmail" for="Email">Email:</label>
          <input type="email" name="email" required="" placeholder="Email Address">

          <label class="contactForMessage" for="message" placeholder="Write Your Message here">What Do You Want to Say:</label>
          <textarea name="message" id="message" placeholder="Write Your mEssage here" cols="30" rows="10"></textarea>

          <input type="hidden" name="_subject" value="New submission From My website">
          <input type="hidden" name="_next" value="https://sunnymoon25.github.io/mainPages/thanks.html">
          <input type="hidden" name="_captcha" value="false">
          <button type="submit">Send</button>
        </form>
      </div>
    </div>

把css放在下面

.ContactPageAll {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.socials {
    width: 50%;
}
.contactForm {
    width: 50%;
}
.contactForm input, textarea, button {
    display: block;
    padding: 2%;
    width: 100%;
    background-color: white;
    color: #111;
}

这里我取了 50:50 的宽度，你可以取任意宽度并根据需要进行更新

【讨论】：

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode