文本输入将焦点从其边界中脱颖而出

Question

im试图在label元素中使用input，但它会从其边框(左侧和右侧(中焦点焦点。

我的代码问题是什么？

label {
  display: block;
  padding-top: 30px;
  text-align: center;
}
label input
{
  background-color: transparent;
  font-size: 36px;
  outline: 0;
  text-align: center;
}
#comment
{
  width: 75%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  background:  #d9d9d9;
  margin-bottom: 30px;
  border: 6px lightblue solid;
}
#name
{  
  width: 35%;
  border: 2px solid #ff5126;
}
#email
{ 
  width: 50%;
  border: 2px solid #ff5126;
  margin-bottom: 30px;
}

<div id="comment">
 <label>
           <input placeholder="Name" type="text" id="name" required/>
 </label>
 <label>
   <input placeholder="E-mail" type="email" id="email" required/>
 </label>
</div>

Answer 1

标签元素的点(除了将某些 text> text 关联，这是您的代码中缺少的 - 与输入中所缺少(输入。

您的标签是display: block，因此它们将填充容器的宽度。

添加背景颜色，边框，轮廓等以查看它的位置。