我网页右侧的空白

Question

I am making a webpage. 我正在制作网页。 I am the first to admit my CSS skills are not the best. 我是第一个承认我的CSS技能不是最好的人。 There is blank space appearing to the right side of the whole page. 整个页面的右侧出现空白。 You can scroll over where there is no content. 您可以滚动到没有内容的地方。 From what I've found on here it may be a problem with position: absolute; 根据我在这里发现的信息， position: absolute;可能有问题position: absolute; , but I've tried commenting them out with no luck. ，但我尝试将它们注释掉没有运气。 Can anyone spot my error? 谁能发现我的错误？

 $icon-font-path:'~bootstrap-sass/assets/fonts/bootstrap/'; @import '~bootstrap-sass/assets/stylesheets/bootstrap'; body { font-family: 'Prompt', sans-serif; z-index: -1; } .landing { position: relative; background: no-repeat url('http://www.win10themes.com/wp-content/uploads/2016/03/Wallpaper-Weather.jpg') 50% / 100%; z-index: 0; } .location-search { width: 50%; margin: 0 auto; } #multiple-search-results { width: 50%; margin: 0 auto; margin-top: 5%; background-color: black; color: white; clear: both; } .multiple-results-list { background-color: black; color: white; } .historical-multiple-results-list { background-color: black; color: white; } .search-label { padding-top: 5%; margin-right: 50%; width: 100%; text-align: center; } .multiple-search-results-heading { padding: 5px; } .date-picker { width: 60%; margin-right: 30%; margin-top: 5%; margin-bottom: 5%; } .input-group-addon { padding: 0; margin: 0; } .map-container { height: 500px; margin: 0; padding: 0; } #chart-div { width: 100%; height: 500px; } .landing img { position: aboslute; vertical-align: top; width: 100%; /* max width */ opacity: 0; /* make it transparent */ z-index: -1; } .jumbotron { z-index: 5; position: absolute; background-color: rgba(224, 224, 224, .5); width: 80%; margin-top: 10%; margin-right: 10%; margin-left: 10%; } .current-weather-media-object { color: white; background-color: black; border: 1px white solid; margin-top: 5%; margin-left: 30%; margin-right: 30%; } .card { color: white; background-color: black; border: 1px white solid; min-height: 375px; } .current-weather-media-object img { max-width: 150px; width: auto; height: auto; margin-left: 25%; margin-top: 25%; } .media-body { padding-left: 10%; font-size: 1em; text-align: center; vertical-align: middle; } .card-img-top { max-width: 60%; height: auto; margin: 0 auto; } .card-title { font-size: 1em; } .card-text { font-size: .85em; } .media-heading { font-size: 2em; text-align: center; vertical-align: middle; } #forecast-results { margin-top: 10%; }

 <!DOCTYPE html> <html> <head> <title>Skycast Inc.</title> <link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet"> <script src="vendor.bundle.js" type="text/javascript" charset="utf-8" defer></script> <script src="bundle.js" type="text/javascript" charset="utf-8" defer></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> </head> <body class="container-fluid"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li id="li-sign-in"><a href="#" data-toggle="modal" data-target="#signInModal">Sign In</a> </li> <li id="li-sign-up"><a href="#" data-toggle="modal" data-target="#signUpModal">Sign Up</a> </li> <li id="li-sign-out" class="hidden"><a href="#" id="sign-out">Sign Out</a> </li> <li id="li-change-pw" class="hidden"><a href="#">Change Password</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class='landing'> <div class="jumbotron"> <h1>SkyCast Inc.</h1> <p>The Forecast Is A Click Away</p> <a class="btn btn-primary btn-lg" href="#" role="button" id="jumbotron-btn">Get Your Local Forecast</a> </div> <img src="http://www.win10themes.com/wp-content/uploads/2016/03/Wallpaper-Weather.jpg"> <!-- I'm invisible! yey!--> </div> <label class='search-label'>Get A Forecast By Locaton</label> <div class="input-group location-search"> <input type="text" class="form-control" id="location-search-input" placeholder="Enter a location" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2"><button type='click' id="location-search-btn" class='btn btn-primary'>Get Forecast</button></span> </div> <div class="col-md-4 col-md-offset-4 date-picker"> <label>Get Data From:</label> <input type="date" id="forecast-start-date"> <br> <label>To:</label> <input type="date" id="forecast-end-date"> <br> <button type='click' id="historical-location-search-btn" class='btn btn-primary'>Get Historical Data</button> </div> <div id="multiple-search-results" class="list-group"> </div> <div id="chart-div"> </div> <div id="forecast-results"> </div> <!-- SIGN IN MODAL --> <div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Sign In</h4> </div> <div class="modal-body"> <form class="form-horizontal" id="sign-in-form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" name="credentials[email]" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" name="credentials[password]" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- SIGN UP MODAL --> <div class="modal fade" id="signUpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Sign Up</h4> </div> <div class="modal-body"> <form class="form-horizontal" id="sign-up-form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" name="credentials[email]" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" name="credentials[password]" placeholder="Password"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Confirm Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" name="credentials[password_confirmation]" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign Up</button> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>

Answer 1

To remove the blank space, you must remove margin-right: 50% from the .search-label element. 要删除空格，必须从.search-label元素中删除margin-right：50％。 In your case its not needed at all, cause you are making that element 100% wide. 在您的情况下，根本不需要它，因为您使该元素宽度为100％。 Since CSS does not have box sizing value of "margin-box" it will make your element wider than parents content width and thats why you are having extra blank space on the right side. 由于CSS没有“ margin-box”的框大小调整值，它将使您的元素宽于父元素的内容宽度，这就是为什么您在右侧有多余的空白。

我网页右侧的空白

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-07-10 17:36:18

我网页右侧的空白

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-07-10 17:36:18

解决方案1
2 已采纳 2016-07-10 17:36:18