Question

HTML表单元素和提交按钮不会显示在页面上，这是我的代码：

HTML：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <title>midiet</title>
  <link href="http://fonts.googleapis.com/css?family=Montserrat:400|Open+Sans:400" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="css/standardize.css">
  <link rel="stylesheet" href="css/midiet-grid.css">
  <link rel="stylesheet" href="css/midiet.css">
</head>
<body class="body page-midiet clearfix">
  <div class="element"></div>
  <img class="image" src="images/Logo (1).png">
  <div class="wrapper"></div>
  <p class="text text-1">Midiet Nutrition believes in better<br>&nbsp; &nbsp;living&nbsp;through better nutrition.</p>
  <button class="_button _button-1"></button>
  <p class="text text-2">Sign up to hear when it is finished.</p>
  <input class="_input" name="Email" type="email">
  <button onClick="window.location='thankyou.html';" class="_button _button-2">Sign up</button>
</body>
</html>

CSS：

body {
  height: 100%;
  background: url('../images/veg.jpg') rgb(255, 255, 255);
  background-size: auto auto;
  background-position: left top;
  font: 400 2em/1.38 Montserrat;
  color: rgb(255, 255, 255);
}

.element {
  position: relative;
  float: left;
  z-index: 0;
  width: 1280px;
  height: 800px;
  background-color: rgb(9, 41, 57);
  opacity: 0.3;
}

.image {
  display: block;
  position: relative;
  float: left;
  clear: both;
  z-index: 3;
  width: 147px;
  height: auto;
  margin: -760px 0 0 3.69385%;
  overflow: hidden;
}

.text {
  position: relative;
  float: left;
  line-height: 1.38;
  color: rgb(255, 255, 255);
}

.wrapper {
  position: relative;
  float: left;
  z-index: 7;
  margin: -643px 0 0 3.69385%;
  overflow: hidden;
}

._button {
  display: block;
  position: relative;
  float: left;
  border-radius: 3px;
  font-family: Helvetica;
  line-height: 1.38;
  text-align: center;
}

._input {
  display: block;
  position: relative;
  float: left;
  z-index: 4;
  width: 28.7793952967%;
  height: 55px;
  margin: -387px 0 0 35.59082%;
  padding: 0 10px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  font: 0.75em/1.38 'Open Sans';
  color: rgb(9, 41, 57);
}

.text-1 {
  z-index: 5;
  margin: -582px 0 0 26.77246%;
  font-size: 1em;
}

.text-2 {
  z-index: 6;
  margin: -480px 0 0 34.9853499999%;
  font-family: 'Open Sans';
  font-size: 0.75em;
}

._button-1 {
  z-index: 1;
  margin: -534px 0 0 30.39551%;
  background-color: rgb(222, 222, 222);
  font-size: 0.5em;
  font-weight: 400;
  color: rgb(0, 0, 0);
}

._button-2 {
  z-index: 2;
  width: 15.765625%;
  height: 54px;
  margin: -315px 0 0 42.39746%;
  background-color: rgb(135, 211, 124);
  font-size: 0.656em;
  word-spacing: 3px;
  color: rgb(255, 255, 255);
}

._button-2:hover {
  background-color: rgb(84, 159, 73);
}

@media(max-width: 640px) {
  body {
    font-size: 1.25em;
  }

  .element {
    position: relative;
    z-index: 0;
    width: 640px;
  }

  .image {
    position: relative;
    z-index: 3;
    height: auto;
  }

  .text {
    position: relative;
  }

  .wrapper {
    position: relative;
    z-index: 7;
  }

  ._button {
    position: relative;
  }

  ._input {
    position: relative;
    z-index: 4;
    font-size: 1.2em;
  }

  .text-1 {
    z-index: 5;
    margin-top: -502px;
    margin-left: 26.6626%;
    font-size: 20px;
  }

  .text-2 {
    z-index: 6;
    margin-top: -440px;
    margin-left: 32.88086%;
    font-size: 0.7em;
  }

  ._button-1 {
    z-index: 1;
    font-size: 0.8em;
  }

  ._button-2 {
    z-index: 2;
    width: 28.7499999999%;
    margin-left: 35.625%;
    font-size: 1.05em;
  }
}

@media(max-width: 480px) {
  .element {
    position: relative;
    z-index: 0;
    width: 480px;
  }

  .image {
    position: relative;
    z-index: 3;
    height: auto;
    margin-top: -576px;
    margin-left: 35.59896%;
  }

  .text {
    position: relative;
  }

  .wrapper {
    position: relative;
    z-index: 7;
    margin-left: 3.69141%;
  }

  ._button {
    position: relative;
  }

  ._input {
    position: relative;
    z-index: 4;
    margin-left: 37.19727%;
  }

  .text-1 {
    z-index: 5;
    margin-top: -490px;
    margin-left: 18.11849%;
  }

  .text-2 {
    z-index: 6;
    margin-top: -427px;
    margin-left: 29.59961%;
  }

  ._button-1 {
    z-index: 1;
    margin-left: 30.39388%;
  }

  ._button-2 {
    z-index: 2;
    width: 28.9583333333%;
    margin-left: 37.29167%;
  }
}

Answer 1

.image {
  margin: -760px 0 0 3.69385%;
  overflow: hidden;
}

此边距很大，图片下方的所有内容都是页面上的760px。但说实话，CSS是一个完整的混乱，注释掉你的整个CSS代码并从头开始，一次添加简单的直接CSS几行，你会发现哪些部分导致你的问题。如果可以，尝试使用JSFIDDLE创建一个示例。

表单元素和提交按钮不会显示

1 个答案: