Question

目标：我正在尝试为用户提交表单以提交他们的学校时间表

问题：我的第一个输入标签不允许我输入输入。所有输入部分都为其占位符文本设置了相同的接受。它们都遵循相同的模式并应用相同的类。

注意：我知道您可以输入代码段内的输入字段，但在我的完整网页中实现时它不起作用。另外，我对HTML / CSS还是比较新的，所以请原谅我的代码有点乱。任何建设性的批评都是公开接受的。

＆＃13;

.form {
  width: 680px;
  height: 870px;
}

.inputConatiner {
  height: 75px;
  width: 680px;
  display: inline-block;
  float: left;
}

.textContainer {
  height: 75px;
  width: 405px;
  display: inline-block;
}

.submitContainer {
  width: 100%;
  height: 40px;
  position: relative;
}

.submit {
  height: 40px;
  width: 150px;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 2075%;
  margin: 0 0 0 -75px;
}

input[type="text"] {
  border: black 0px solid;
  border-radius: 20px;
  background-color: rgb(230, 230, 230);
  padding-top: 13px;
  padding-bottom: 13px;
  font-family: "Arial";
}

input[type="radio"] {
  height: 30px;
  width: 30px;
  margin: 0;
  vertical-align: middle;
}

input[type="submit"] {
  height: 40px;
  width: 150px;
  border: black 0px solid;
  border-radius: 20px;
}

label[for="A"],
label[for="B"] {
  display: inline-block;
  width: 160px;
  font-family: "Arial";
}

fieldset {
  border: black 0px solid;
  padding: 0px;
}

.label {
  width: 270px;
  height: 40px;
  font-family: "Nunito Sans";
  font-size: 30px;
  display: inline-block;
  background-color: rgb(104, 255, 144);
  border-radius: 20px;
  text-align: center;
  vertical-align: middle;
}

input {
  width: 200px;
}

＆＃13;

	<head>
		<title>Side Project</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
		<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
	</head>
<div class="form">
  <form method="post" action="#" name="getStudentInfo">
    <div class="inputConatiner">
      <h1 class="label">Enter Your Name</h1>
      <div class="textContainer">
        <input type="text" placeholder="First" required />
        <input type="text" placeholder="Last" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">1A Class</h1>
      <div class="textContainer">
        <input type="text" placeholder="Class" required />
        <input type="text" placeholder="Teacher" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">2A Class</h1>
      <div class="textContainer">
        <input type="text" placeholder="Class" required />
        <input type="text" placeholder="Teacher" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">3A Class</h1>
      <div class="textContainer">
        <input type="text" placeholder="Class" required />
        <input type="text" placeholder="Teacher" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">4A Class</h1>
      <div class="textContainer">
        <input type="text" placeholder="Class" required />
        <input type="text" placeholder="Teacher" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">A Day Lunch</h1>
      <input type="radio" id="A" name="lunchADay" />
      <label for="A">First Lunch</label>
      <input type="radio" id="B" name="lunchADay" />
      <label for="B">Second Lunch</label>
    </div>
    <div class="inputConatiner">
      <h1 class="label">1B Class</h1>
      <div class="textContainer">
        <input type="text" placeholder="Class" required />
        <input type="text" placeholder="Teacher" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">2B Class</h1>
      <div class="textContainer">
        <input type="text" placeholder="Class" required />
        <input type="text" placeholder="Teacher" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">3B Class</h1>
      <div class="textContainer">
        <input type="text" placeholder="Class" required />
        <input type="text" placeholder="Teacher" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">4B Class</h1>
      <div class="textContainer">
        <input type="text" placeholder="Class" required />
        <input type="text" placeholder="Teacher" required />
      </div>
    </div>
    <div class="inputConatiner">
      <h1 class="label">B Day Lunch</h1>
      <input type="radio" id="A" name="lunchBDay" />
      <label for="A">First Lunch</label>
      <input type="radio" id="B" name="lunchBDay" />
      <label for="B">Second Lunch</label>
    </div>
    <div class="submitContainer">
      <div class="submit">
        <input type="submit" placeholder="Submit" />
      </div>
    </div>
  </form>
</div>

＆＃13;

Answer 1

问题是你的提交按钮的包装div与第一个输入重叠。由于您已在所有输入中使用float: left，请尝试在一个div标记中包含所有输入。

将此添加到您的css

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

将输入包裹起来，如

<form method="post" action="#" name="getStudentInfo">
    <div class="clearfix">
        <div class="inputConatiner">
            ...
        </div>
        <div class="inputConatiner">
            ...
        </div>
        <div class="inputConatiner">
            ...
        </div>
        <div class="inputConatiner">
            ...
        </div>
        <div class="inputConatiner">
            ...
        </div>
        <div class="inputConatiner">
            ...
        </div>
        <div class="inputConatiner">
            ...
        </div>
    <div class="submitContainer">
        <div class="submit">
            <input type="submit" placeholder="Submit" />
        </div>
    </div>
</form>

Answer 2

首先让我说明你的css和容器工作需要更多工作...... 你的第一个输入标签没有让你输入，因为＆＃34; submitcontainer＆＃34;重叠了输入标签...我删除了提交容器并稍微定位了提交按钮......但我恳请你学习一些造型并且不依赖于绝对位置......

<div class="submit">
        <input type="submit" placeholder="Submit" />
</div>

.submit {
  height: 40px;
  width: 150px;
  display: inline-block;
  position: absolute;
  left: 30%;
  top: 100%;
  margin: 0 0 0 -75px;
}

Codepen链接： https://codepen.io/anon/pen/MrJGrN

Answer 3

您已浮动行元素但未清除它们。因此，提交按钮的容器元素位于页面顶部，部分重叠行，即使按钮本身已被推到底部（使用绝对定位）。

您需要首先使用 .submitContainer 清除浮动元素，然后将按钮居中对齐，而不是这样做：

.submitContainer {
    width: 100%;
    height: 40px;
    position: relative;
    /* CLEAR THE FLOATED ROWS */
    clear: both;
    /* CENTER-ALIGN THE CONTENTS OF THIS CONTAINER */
    text-align: center;
}

接下来，从 .submit 元素本身删除绝对定位，以及负边距（因为它现在由其容器对齐）：

.submit {
    height: 40px;
    width: 150px;
    display: inline-block;
    /* position: absolute; <- REMOVE THIS */
    /* left: 50%; <- REMOVE THIS */
    /* top: 2075%; <- REMOVE THIS */
    /* margin: 0 0 0 -75px; <- REMOVE THIS */
}

这将允许提交容器和按钮位于表单下方，而不必将其按下。

无法在<input />标记中键入响应

3 个答案: