个人中心
gpt4 book ai didi

javascript - 屏幕左侧的白色垂直线

转载 作者：太空宇宙 更新时间：2023-11-04 08:33:00 27 4
gpt4 key购买 nike

我正在创建一个网站，在我的 CSS 中添加背景图片时，屏幕左侧似乎有一条随机的白色垂直线。我已经在 Chrome 和 Safari 浏览器中检查过了。谁能帮助解决这个问题并解释它是如何起源的？

    .container-fluid {
      background-color: white;
      background-image: none;
      border-color: white;
      border-style: solid;
      border-width: 15px 15px 15px 15px;
    }
    .navbar {
      display: flex;
      align-items: center;
    }
    .fb {
      height: 50px;
      width: 50px;
      float: right;
    }
    a.btn-quote {
      float: right;
      padding-top: auto;
      padding-bottom: auto;
    }
    .header {
      background-image: url(http://images.all-free-download.com/images/graphiclarge/green_grass_04_hd_picture_166122.jpg);
      background-repeat: none;
      background-size: cover;
    }
    .logo_img {
      height: 150px;
      width: 200px;
      float: left;
      display: block;
    }
    blockquote.slogan {
      font-size: 35px;
      color: red;
      text-align: center;
    }
    .quote {
      text-align: center;
      font-size: 40px;
      color: white;
    }
    span.free {
    	color: red;
    }
    .premium {
      font-family: 'Graduate';
      font-size: 50px;
      text-align: center;
      color: white;
    }
    .addy {
      max-width: 50%;
      margin-right: auto;
      margin-left: auto;
    }
    .fqbutton {
      display: inline-block;
      margin-right: auto;
      margin-left: auto;
    }
    .article {
    	margin-right: 250px;
    	margin-left: 250px;
    }
    blockquote.construction {
      font-size: 15px;
      color: white;
      text-align: center;
    }
    .constructpic {
      height: 250px;
      width: 250px;
      display: block;
      margin-right: auto;
      margin-left: auto;
    }
    footer {
      text-align: center;
      color: black;
      background-color: white;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>CCF Lawn Care</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="style1.css"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      
    </head>
    <!-- MAIN CONTAINER -->
      <div class="container-fluid">
        <body>
          <!--   CCF LOGO IMG -->
        <img src="http://res.cloudinary.com/hfitzger/image/upload/c_scale,h_650,w_900/v1497668893/CCF_Logo_jsa1ha.jpg" alt="CCF Logo" class="logo_img" />
    <!--     NAV BAR -->
    
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">CCF Lawn Care</a>
        </div>
        <ul class="nav navbar-nav">
          <li><a href="#">Services</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <!-- FACEBOOK -->
        <a href="https://www.facebook.com/CFFLAWNCARE/" target="blank"><img src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png" class="fb"></a>
        <!-- FREE QUOTE BUTTON -->
        <a href="#" class="btn btn-danger btn-quote" role="button">Free Quote</a>
    
      </div>
    </nav>
    <blockquote class="slogan"><em>"We work hard so <strong>               <ins>YOU</ins></strong> don't have to!"</em>
          </blockquote>
    
          <!-- HEADER -->
          <div class="header">
          <p class="premium">Premium Lawn Care service in Middle Tennessee</p>
          <!--   FREE QUOTE SECTION -->
          <div class="addy">
          <input class="form-control" type="text" placeholder="Enter your address here" required>
          <button type="submit" class="btn btn-primary">Get Free Quote </button>
          </div>
          
        <h3 class="quote">Call 615-870-9822 for a <span class="free">FREE QUOTE</span></h3>
          <!--   ARTICLE SECTION -->
          
    
    
            <blockquote class ="construction">Please come back and view our updates as we are temporarily under construction! <img src="https://server211.web-hosting.com:2083/cpsess0930665082/viewer/home%2fhfitzger%2fpublic_html%2fimages/construction.png" class="constructpic"></blockquote>
          
          <!--   FOOTER -->
          <footer>
            Created and managed by <img src="https://res.cloudinary.com/hfitzger/image/upload/t_media_lib_thumb/v1497793352/Fitz_Bitz_Logo_jqhmjq.png" alt="Fitz&Bitz Logo" />
          </footer>
          <!-- jQuery CDN -->
             <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
             <!-- Bootstrap Js CDN -->
             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </body>
        
    
    </html>

最佳答案

白线是因为blockquote元素，可以通过添加来禁用白边框

    blockquote {
    border-left: none;
}

关于javascript - 屏幕左侧的白色垂直线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44678615/

27 4 0
文章推荐： java - Struts2 验证 - 验证失败时重新填充子项
文章推荐： 具有多个循环的 Python 列表理解
文章推荐： JAVA BCEL NEWARRAY getType 基本类型
文章推荐： python - 在 linux 的 80 端口上运行 flask
太空宇宙
个人简介

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

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