个人中心
gpt4 book ai didi

html - 这个空白区域是如何进入我的网站的？

转载 作者：太空宇宙 更新时间：2023-11-03 20:07:32 25 4
gpt4 key购买 nike

我的 HTML 代码:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="images/favicon.ico">
    <title>Bla Bla Car Rentals - Payment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="styles/style.css"> <!-- Link to style.css -->
    <script src="https://use.fontawesome.com/62011a4bec.js"></script><link href="https://use.fontawesome.com/62011a4bec.css" media="all" rel="stylesheet"> <!-- Font awesome CDN -->
    <script src="js/part2.js"></script>
</head>
<body>
<section class="bgimg">
    <a class="back-button" href="enquiry.html"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back to website</a>
    <h1 class="heading">Payment</h1>
</section>
<div class="main">
    <div id="container">
        <div id="img-sec">
            <img id="car-img" src="images/bmw-m3.jpg">
        </div>
        <div id="summary-sec"><label>BMW - M3<span class="right-text"> 250AUD (per day)</span></label><br><label>Number of days <span class="right-text">X 1</span></label><br><label>Product total: <span class="right-text">250 AUD</span></label><br><label>Insurance Cover<span class="right-text">+50 AUD</span></label><br><label>Sports model<span class="right-text">+100 AUD</span></label><br><label>Snow Insurance Cover<span class="right-text">+0 AUD</span></label><br><hr><label class="grand">Total: <span class="right-text">400 AUD </span></label></div>
    </div>
</div>

</body>

我的 CSS 代码:

    body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size:13px;
  font-weight: 300;
  position:relative;
  background-color:#2D112A;
}

    .bgimg{
  width: 100%;
  height: 500px;
  background: url('images/money.jpg') no-repeat center; /* Link - https://unsplash.com/collections/597225/money?photo=OCrPJce6GPk */
  background-size: cover;
  position: relative;
}
.main{
  width: 100%;
  height: 550px;
  background: #F5F5F5;
  position: relative;
  padding-top: 6%;
}

.main:before{
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  left: 0;
  background: #F5F5F5;
  transform: skewY(6deg);
}
.main:after{
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  right: 0;
  background: #F5F5F5;
  transform: skewY(-6deg);
}
.back-button{
  position: absolute;
  top: 8%;
  left: 3%;
  font-size: 20px;
  background: none;
  color: whitesmoke;
  border: 2px solid whitesmoke;
  border-radius: 10px;
  padding: 13px;
  cursor:pointer;
  text-decoration: none;
}
.back-button i{
  margin-right: 5px;
  font-size: 18px;
}
#container{
  margin: 0 auto;
  height: 530px;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#img-sec{
  width: 50%;
  height: 100%;
  float: left;
}
#summary-sec{
  width: 50%;
  height: 100%;
  float: left;
}
#car-img{
  height: 100%;
  width: 100%;
}
.heading{
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  left: 45%;
  top: 7%;
  font-family: 'Merriweather', serif;
}

Normal visible page Part with unknown space这是我网站的截图。我检查了所有 css 是否有额外的填充或边距，但没有。我什至尝试使用 Google 开发人员工具检查它，但没有找到源代码。不明白整页左边怎么会出现空白!帮助将不胜感激!谢谢

JSFiddleLink

最佳答案

问题 出在您的 h1 标签 css 中。 left:45% 导致了问题。 所以我为此添加了修复。

.heading {
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  /* left: 45%;*/
  top: 7%;
  font-family: 'Merriweather', serif;
  /*New Css*/
  width: 100%;
  text-align: center;
}

Hope it works perfectly for you now:) . below is the working code.

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  position: relative;
  background-color: #2D112A;
}

.bgimg {
  width: 100%;
  height: 500px;
  background: url('images/money.jpg') no-repeat center;
  /* Link - https://unsplash.com/collections/597225/money?photo=OCrPJce6GPk */
  background-size: cover;
  position: relative;
}

.main {
  width: 100%;
  height: 550px;
  background: #F5F5F5;
  position: relative;
  padding-top: 6%;
}

.main:before {
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  left: 0;
  background: #F5F5F5;
  transform: skewY(6deg);
}

.main:after {
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  right: 0;
  background: #F5F5F5;
  transform: skewY(-6deg);
}

.back-button {
  position: absolute;
  top: 8%;
  left: 3%;
  font-size: 20px;
  background: none;
  color: whitesmoke;
  border: 2px solid whitesmoke;
  border-radius: 10px;
  padding: 13px;
  cursor: pointer;
  text-decoration: none;
}

.back-button i {
  margin-right: 5px;
  font-size: 18px;
}

#container {
  margin: 0 auto;
  height: 530px;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#img-sec {
  width: 50%;
  height: 100%;
  float: left;
}

#summary-sec {
  width: 50%;
  height: 100%;
  float: left;
}

#car-img {
  height: 100%;
  width: 100%;
}

.heading {
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  /* left: 45%;*/
  top: 7%;
  font-family: 'Merriweather', serif;
  /*New Css*/
  width: 100%;
  text-align: center;
}
<section class="bgimg">
  <a class="back-button" href="enquiry.html"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back to website</a>
  <h1 class="heading">Payment</h1>
</section>
<div class="main">
  <div id="container">
    <div id="img-sec">
      <img id="car-img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </div>
    <div id="summary-sec"><label>BMW - M3<span class="right-text"> 250AUD (per day)</span></label><br><label>Number of days <span class="right-text">X 1</span></label><br><label>Product total: <span class="right-text">250 AUD</span></label><br><label>Insurance Cover<span class="right-text">+50 AUD</span></label><br><label>Sports model<span class="right-text">+100 AUD</span></label><br><label>Snow Insurance Cover<span class="right-text">+0 AUD</span></label><br>
      <hr><label class="grand">Total: <span class="right-text">400 AUD </span></label></div>
  </div>
</div>

关于html - 这个空白区域是如何进入我的网站的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43581860/

25 4 0
文章推荐： css - 如何否定CSS中的所有 child ？
文章推荐： c# - 函数返回路径
文章推荐： c# - { 得到;放; } 在变量声明中
文章推荐： c# - 如何不删除单个特定 session 变量？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com