Question

我正在尝试创建一个单页网站。在顶部的div上方，我有不需要的空格，每个div之间都有相同的（截图如下）。边距：身体选择器中的0（根据其他问题推荐）从左侧，右侧和底部移除空白区域。填充：身体选择器中的0似乎没有做任何事情。我也在div页面选择器中尝试了margin-top：0px，但它没有做任何事情。在Chrome和Vivaldi中显示相同的内容。我错过了一些简单的东西，我想哈哈。

html,
body {
  background-color: white;
  margin: 0px;
  padding: 0px;
}
#nav {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 10px #000;
  position: fixed;
  margin: 0px;
  width: 190px;
}
#nav ul {
  color: white;
  list-style-type: none;
}
#nav ul a {
  color: #fff;
  font-family: "Metrophobic", Arial, serif;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.5s;
}
#nav ul a:active {
  color: #3498db;
}
#nav ul a:hover {
  color: #3498db;
}
#page1 {
  background-color: blue;
  height: 100%;
  height: 100vh;
}
#page2 {
  background-color: yellow;
  height: 100%;
  height: 100vh;
}
#page3 {
  background-color: green;
  height: 100%;
  height: 100vh;
}
#page4 {
  background-color: purple;
  height: 100%;
  height: 100vh;
}

<div id="nav">
  <ul>
    <li><a href="#home">HOME</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
    <li><a href="#work">WORK</a>
    </li>
    <li><a href="#contact">CONTACT</a>
    </li>
  </ul>
</div>
<div id="page1">
  <a id="home" class="smooth"></a>
  <h1>Home page content goes here.</h1>
</div>
<div id="page2">
  <a id="about" class="smooth"></a>
  <h1>About page content goes here.</h1>
</div>
<div id="page3">
  <a id="work" class="smooth"></a>
  <h1>Work page content goes here.</h1>
</div>
<div id="page4">
  <a id="contact" class="smooth"></a>
  <h1>Contact page content goes here.</h1>
</div>

Answer 1

您还需要从<?php $today = strtotime(date("d-m-Y")); $now = strtotime(date("H:i")); $before = "-".$settings['close_before']." hours"; if(isset($_POST['date'])) { $date = strtotime($_POST['date']); $day = strtolower(date("D", $date)); // THIS HERE SHOULD BE RETURNED TO TXTHINT DIV BELOW IN FORM echo "<select name=\"time\" class=\"form-control\" disabled>"; echo "<option value=\"\">".$day."</option>"; echo "</select>"; } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>form</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="js/jquery.ui.datepicker-da.js"></script>  <script> $(function() { $( "#datepicker" ).datepicker($.extend({ constrainInput: true, altField: ".alternate", altFormat: "yy-mm-dd", minDate: 0, firstDay: 1, onSelect:function(dateText,instance) { $.post("index.php", { date:dateText }, function(data) { var obj = $(data); $("#txtHint").html(obj.find("didHint").html()); }); } } )); }); </script> </head> <body> <form role="form" method="post" action="index.php"> <div class="box-body"> <div class="form-group"> <div class="row"> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon text-bold uppercase"><i class="fa fa-calendar"></i> <small><i class="fa fa-asterisk text-red"></i></small></span> <input id="datepicker" type="text" class="form-control date"> <input name="date" class="alternate" type="hidden"> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon text-bold uppercase" style="border: none !important;"><i class="fa fa-clock-o"></i> <small><i class="fa fa-asterisk text-red"></i></small></span>  <div id="txtHint"> <select name="time" class="form-control" disabled> <option value="" selected disabled>Select date first</option> </select> </div> </div> </div> </div> </div> <div class="form-group"> <button type="submit" name="goforit" class="btn btn-success pull-right text-bold" style="text-transform: uppercase;">submit</button> </div> </div> </form> </body> </html>元素中删除边距：

<h1>

h1 {
    margin:0;
}

html,
body {
  background-color: white;
  margin: 0px;
  padding: 0px;
}
#nav {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 10px #000;
  position: fixed;
  margin: 0px;
  width: 190px;
}
#nav ul {
  color: white;
  list-style-type: none;
}
#nav ul a {
  color: #fff;
  font-family: "Metrophobic", Arial, serif;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.5s;
}
#nav ul a:active {
  color: #3498db;
}
#nav ul a:hover {
  color: #3498db;
}
#page1 {
  background-color: blue;
  height: 100%;
  height: 100vh;
}
#page2 {
  background-color: yellow;
  height: 100%;
  height: 100vh;
}
#page3 {
  background-color: green;
  height: 100%;
  height: 100vh;
}
#page4 {
  background-color: purple;
  height: 100%;
  height: 100vh;
}
h1 {
  margin: 0;
}

Answer 2

为什么你不使用fullPage.js？

CSS - DIV空格 - '边距/填充设置为0px不会删除它'

2 个答案: