Question

目标：我正在尝试在我正在处理用户输入某些信息的项目上设置输入。目前我在最左边的气泡中设置了输入标签，然后是两个文本输入气泡。

问题：输入字段比标记它们的气泡大约5个像素，我无法弄清楚如何纠正它。

注意：我是HTML / CSS的新手，我完全是自学成才，所以如果有更好的方法来做我想做的事，请让我新的。贝娄是给我带来麻烦的部分

.inputConatiner {
  height: 75px;
}

.textContainer {
  height: 75px;
  width: 500px;
  display: inline-block;
}

input[type="text"] {
  border: 0px solid;
  border-radius: 20px;
  background-color: rgb(230, 230, 230);
  padding-top: 13px;
  padding-left: 10px;
  padding-bottom: 13px;
}

.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;
}

input {
  width: 200px;
}

<head>
  <title>Side Project</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>

<body>
  <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>
      <input type="text" placeholder="Class" required />
      <input type="text" placeholder="Teacher" required />
    </div>
  </form>
</body>

Answer 1

使用display: flex; .textContainer来解决5px问题。

请参阅此文档了解FlexBox

Answer 2

我已在下方更新了您的代码段。我认为这是您正在寻找的内容，只需使用vertical-align: middle;上的label进行修复即可。不确定你使用的是什么，但是，我建议使用像https://getbootstrap.com/这样的框架。大多数框架都会在所有屏幕尺寸和设备上都有很好的基础块（如下面的代码片段，你必须全屏查看，否则它就是一团糟。目前，从UI的角度来看，这种实现非常有限。敏感。

希望这有帮助。

.inputConatiner {
  height: 75px;
}

.textContainer {
  height: 75px;
  width: 500px;
  display: inline-block;
}

input[type="text"] {
  border: 0px solid;
  border-radius: 20px;
  background-color: rgb(230, 230, 230);
  padding-top: 13px;
  padding-left: 10px;
  padding-bottom: 13px;
}

.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;
}

<head>
  <title>Side Project</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>

<body>
  <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>
      <input type="text" placeholder="Class" required />
      <input type="text" placeholder="Teacher" required />
    </div>
  </form>
</body>

Answer 3

我在您的HTML代码中发现的一件事是您的第二个.inputContainer缺少.textContainer。既然你已经说过你对HTML和CSS相当新，我建议你使用像float这样的基本属性来使元素并排堆叠，margin用于间距/对齐。

.inputConatiner {
  height: auto;
}

/* Without this, the layout would be ruined because of float */
.inputConatiner:before, .inputConatiner:after {
  content: '';
  display: table;
}
.inputConatiner:after {
  clear: both;
}

.textContainer {
  height: auto;
  width: 500px;
  margin-top: 20px;
  margin-left: 10px;
  float: left; /* This makes the elements stacked side by side */
}

input[type="text"] {
  border: 0px solid;
  border-radius: 20px;
  background-color: rgb(230, 230, 230);
  padding-top: 13px;
  padding-left: 10px;
  padding-bottom: 13px;
}

.label {
  width: 270px;
  height: 40px;
  font-family: "Nunito Sans";
  font-size: 30px;
  float: left; /* This makes the elements stacked side by side */
  background-color: rgb(104, 255, 144);
  border-radius: 20px;
  text-align: center;
}

input {
  width: 200px;
}

<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>
</form>

难以垂直居中h1元素和输入元素

3 个答案: