Question

所以最近我开始学习Web开发，并且似乎在过渡属性方面经常遇到以下问题。

代码如下：

https://codepen.io/utkarsh-kumar384/pen/qBZPxPb

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="/Python_Scripts/static/css/add.css" />
</head>

<body>
  <div class="container">
    <form action="" method="post">

      <div class="flex-items">
        <input type="text" name="Rate" required="" />
        <label class="label-placeholder">
          <span>input text 1</span>
        </label>
      </div>
      <div class="flex-items">
        <input type="text" name="JrlNo" required="" />
        <label class="label-placeholder">
          <span>a very long input text </span>
        </label>
      </div>

    </form>
  </div>
</body>

</html>

CSS：

:root {
  --abel: "Abel", sans-serif;
  --Open-sans: "Open-Sans", "Arial Rounded MT Bold";
}

form{
  width: 45%;
  min-width: 45%;
  min-height: 45%;
  max-height: 45%;
}

body {
  padding: 0;
  margin: 0;
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

.container {
  background-color: whitesmoke;
  border: 3px solid grey;
  margin: auto;
  margin-top: 20vh;
  padding: 30px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
  width: 50%;
}

.flex-items {
  margin: 10px;
}

.label-placeholder {
  pointer-events: none;
}

.label-placeholder span {
  position: relative;
  bottom: 8vh;
  left: 6px;
  transition: ease-in 0.19s;
  font-family: var(--abel);
  font-size: 1.15em;
  letter-spacing: 2px;
}

.flex-items input[type="text"] {
  color: #595f6e;
  padding-top: 20px;
  width: 100%;
  border: none;
  font-size: 1.05em;
  max-width: 100%;
  min-width: 100%;
}
.flex-items input[type="text"]:focus + .label-placeholder span,
.flex-items input[type="text"]:valid + .label-placeholder span {
  bottom: 16vh;
  left: 0;
  font-family: var(--Open-sans);
  font-size: 0.9em;
}

.flex-items input[type="text"]:invalid {
  box-shadow: none;
  outline: none;
  border: none;
}

.flex-items input[type="text"]:focus {
  border-bottom: 2px solid black;
  transition: ease-in-out 0.2s;
  background: rgb(243, 243, 243);
}

所以我的问题是，每当我单击不同的输入字段时，表单高度似乎都会以非常微妙的方式变化。有什么方法可以设置固定的表格高度，使其不会移动？

任何帮助将不胜感激！

编辑：我也面临其他元素的问题。不只是形式。

Answer 1

您的元素会更改其大小，这也会使其容器也随之更改其大小。

您需要进行两项小调整：

首先，确定占位符的高度：

.label-placeholder {
       height: 25px;
       display: block;
    }

然后，当黑色边框不可见时，在输入字段中添加透明边框：

.flex-items input[type="text"] {
  border-bottom: 2px solid transparent;
}

.flex-items input[type="text"]:invalid {
  border-bottom: 2px solid transparent;
}

.flex-items input[type="text"]:focus {
  border-color: black;
}

总体摘要：

:root {
  --abel: "Abel", sans-serif;
  --Open-sans: "Open-Sans", "Arial Rounded MT Bold";
}

form{
  width: 45%;
  min-width: 45%;
  min-height: 45%;
  max-height: 45%;
}

body {
  padding: 0;
  margin: 0;
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

.container {
  background-color: whitesmoke;
  border: 3px solid grey;
  margin: auto;
  margin-top: 20vh;
  padding: 30px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
  width: 50%;
}

.flex-items {
  margin: 10px;
}

.label-placeholder {
  pointer-events: none;
  display: block;
  height: 30px;
}

.label-placeholder span {
  position: relative;
  bottom: 8vh;
  left: 6px;
  transition: ease-in 0.19s;
  font-family: var(--abel);
  font-size: 1.15em;
  letter-spacing: 2px;
}

.flex-items input[type="text"] {
  color: #595f6e;
  padding-top: 20px;
  width: 100%;
  border: none;
  font-size: 1.05em;
  max-width: 100%;
  min-width: 100%;
  border-bottom: 2px solid black;
}
.flex-items input[type="text"]:focus + .label-placeholder span,
.flex-items input[type="text"]:valid + .label-placeholder span {
  bottom: 16vh;
  left: 0;
  font-family: var(--Open-sans);
  font-size: 0.9em;
}

.flex-items input[type="text"]:invalid {
  box-shadow: none;
  outline: none;
}

.flex-items input[type="text"]:focus {
  border-color: black;
  transition: ease-in-out 0.2s;
  background: rgb(243, 243, 243);
}

  <div class="container">
    <form action="" method="post">

      <div class="flex-items">
        <input type="text" name="Rate" required="" />
        <label class="label-placeholder">
          <span>input text 1</span>
        </label>
      </div>
      <div class="flex-items">
        <input type="text" name="JrlNo" required="" />
        <label class="label-placeholder">
          <span>a very long input text </span>
        </label>
      </div>

    </form>
  </div>

Answer 2

尝试在表单上使用此代码。

form {
    width: 45%;
    min-width: 45%;
    min-height: 45%;
    max-height: 150px;
    height: 100%;
}

影响CSS中其他元素的过渡属性

2 个答案: