文本输入将焦点移出边界

Question

我试图在input元素中使用label，但它会从边框（左侧和右侧）获得焦点。

我的代码问题是什么？

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

标签元素的要点（除了将一些文本 - 代码中缺少的 - 与输入相关联）是单击标签将聚焦输入。

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

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