我认为我的形象是不言自明的。不过,我会详细介绍。我最近在尝试构建我的网页时遇到了这个问题。我的网页右侧只有大量的空白,这对我来说完全没有必要。我尝试更改 HTML 和 CSS 文件中所有元素的宽度,但没有成功。我真的需要一些帮助才能摆脱空白。 这是我的 HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet'>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<title></title>
</head>
<body>
<div class="container-fluid" style="font-family: Actor">
<div class="row " style="position: absolute; z-index: 999; opacity:1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #FFFFFF; padding: 4px;">
<div class="col-xs-2">
<img src="images/1-OrderUp!!.jpg" alt="OrderUp logo">
</div>
<div class="col-xs-2">
<p class="text-style-1">OrderUp!!</p>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px; margin-left: 784px;"></div>
<div class="col-xs-2">
<button class="btn btn-danger btn-lg" style="width: 100px">Log in
<?php
?>
</button>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px;"></div>
<div class="col-xs-2">
<button class="btn btn-danger btn-lg">Sign Up
<?php
?>
</button>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px;"></div>
</div><br>
<div class="row">
<div class="col-xs-12" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 100%">
<div class="image">
<img src="images/home-1.jpg" style="width: 1350px;">
<p class="X">Welcome to OrderUp!!</p>
<p class="X_1"> Get food you love delivered at your doorstep!!</p>
<div >
<form class = "form-inline" class="srch_br"action="srch_location.php" method="post" enctype="multipart/form-data">
<input type="text" name="loc_srch" placeholder="Enter your location">
<button type="submit" class="btn btn-danger btn-md">Search</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这是 CSS:
.btn.btn-danger.btn-lg{
border-radius: 0;
height: 100px;
}
.text-style-1{
font-family:Actor;
font-weight: bold;
font-size:55px;
padding-top:2px;
padding-left:20px;
color: #511F18";
}
.image {
position: relative;
}
.X{
position: absolute;
top: 200px;
left: 820px;
width: 100%;
color: #FFFFFF;
font-size: 55px;
}
.X_1{
position: absolute;
top: 270px;
left:660px;
width: 100%;
color: #FFFFFF;
font-size: 35px;
}
.srch_br{
position: absolute;
top:400px;
left: 50px;
padding: 15px;
background-color: #FFFFFF;
}
最佳答案
你有很多问题
-
弹出窗口的
- class
X
和X_1
与视口(viewport)重叠。给它一个百分比的左值。 - 图像与视口(viewport)重叠。给它一个百分比宽度
- 和你的固定位置div也重叠..给它一个宽度
.btn.btn-danger.btn-lg {
border-radius: 0;
height: 100px;
}
.text-style-1 {
font-family: Actor;
font-weight: bold;
font-size: 55px;
padding-top: 2px;
padding-left: 20px;
color: #511F18";
}
.image {
position: relative;
width: 100%;
}
.X {
position: absolute;
top: 200px;
color: #FFFFFF;
font-size: 55px;
}
.X_1 {
position: absolute;
top: 270px;
color: #FFFFFF;
font-size: 35px;
}
.srch_br {
position: absolute;
top: 400px;
left: 50px;
padding: 15px;
background-color: #FFFFFF;
}
<div class="container-fluid" style="font-family: Actor">
<div class="row " style="position: absolute; z-index: 999; opacity:1; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color: #FFFFFF; padding: 4px;">
<div class="col-xs-2">
<img src="images/1-OrderUp!!.jpg" alt="OrderUp logo">
</div>
<div class="col-xs-2">
<p class="text-style-1">OrderUp!!</p>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px; margin-left: 784px;"></div>
<div class="col-xs-2">
<button class="btn btn-danger btn-lg" style="width: 100px">Log in
<?php
?>
</button>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px;"></div>
<div class="col-xs-2">
<button class="btn btn-danger btn-lg">Sign Up
<?php
?>
</button>
</div>
<div class="col-xs-1" style="height: 100px; background: #511F18; width: 2px;"></div>
</div><br>
<div class="row">
<div class="col-xs-12" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 100%">
<div class="image">
<img src="images/home-1.jpg" style="width: 1350px;">
<p class="X">Welcome to OrderUp!!</p>
<p class="X_1"> Get food you love delivered at your doorstep!!</p>
<div>
<form class="form-inline" class="srch_br" action="srch_location.php" method="post" enctype="multipart/form-data">
<input type="text" name="loc_srch" placeholder="Enter your location">
<button type="submit" class="btn btn-danger btn-md">Search</button>
</form>
</div>
</div>
</div>
</div>
</div>
关于html - 我的网页有很多不必要的空格,我该如何解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51659482/