Question

我正在尝试按照教程进行操作，以便在选择输入时，标签会升起，并且线条会更改颜色。问题是它创建了第二行显示在输入的中间。

它应该像此网站上的here

一样显示

我尝试比较代码，然后准确键入，但仍然无法正常工作。

我的代码是

html,
body {
  height: 100%;
}
body {
  display: grid;
  font-family: Avenir;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
.inp {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 280px;
}
.inp .label {
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 16px;
  color: #9098a9;
  font-weight: 500;
  transform-origin: 0 0;
  transition: all 0.2s ease;
}
.inp .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #07f;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: all 0.15s ease;
}
.inp input {
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 12px 0;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #c8ccd4;
  background: none;
  border-radius: 0;
  color: #223254;
  transition: all 0.15s ease;
}
.inp input:hover {
  background: rgba(34,50,84,0.03);
}
.inp input:not(:placeholder-shown) + span {
  color: #5a667f;
  transform: translateY(-26px) scale(0.75);
}
.inp input:focus {
  background: none;
  outline: none;
}
.inp input:focus + span {
  color: #07f;
  transform: translateY(-26px) scale(0.75);
}
.inp input:focus + span + .border {
  transform: scaleX(1);
}

<!DOCTYPE html>
<html>
	<head>
		. . .
	</head>

	<body bgcolor="#f4b942">
		<div>
			<label for="inp" class="inp">
				  <input type="text" id="inp" placeholder="&nbsp;">
				  <span class="label">Insert Values</span>
				  <span class="border"></span>
			</label>
		</div>
   </body>
  </html>

Answer 1

您的代码与您提到的示例链接不完全相同。您已在<label>中添加了<div>。 <div>具有默认的display: block，这是导致此问题的原因。因此，有两个选项1）删除<div> 2）将更改display: block添加到其他一些值，例如display: flex。它将起作用。

下面是代码：

html,
body {
  height: 100%;
}

body {
  display: grid;
  font-family: Avenir;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

.div {
  display: flex;
}

.inp {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 280px;
}

.inp .label {
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 16px;
  color: #9098a9;
  font-weight: 500;
  transform-origin: 0 0;
  transition: all 0.2s ease;
}

.inp .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #07f;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: all 0.15s ease;
}

.inp input {
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 12px 0;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #c8ccd4;
  background: none;
  border-radius: 0;
  color: #223254;
  transition: all 0.15s ease;
}

.inp input:hover {
  background: rgba(34, 50, 84, 0.03);
}

.inp input:not(:placeholder-shown)+span {
  color: #5a667f;
  transform: translateY(-26px) scale(0.75);
}

.inp input:focus {
  background: none;
  outline: none;
}

.inp input:focus+span {
  color: #07f;
  transform: translateY(-26px) scale(0.75);
}

<!DOCTYPE html>
<html>

<head>
  . . .
</head>

<body bgcolor="#f4b942">
  <div class="div">
    <label for="inp" class="inp">
				  <input type="text" id="inp" placeholder="&nbsp;">
				  <span class="label">Insert Values</span>
				  <span class="border"></span>
			</label>
  </div>
</body>

</html>

HTML在错误的地方显示行

1 个答案: