html – 输入顶部边框在windows chrome中消失

发布时间：2020-12-14 23:29:32 所属栏目：资源来源：网络整理

导读：code div class="center" div class="parent" label姓名/label input type="text" /div/div.center { transform: translate(-50%,-50%); position: absolute; top: 50%; left: 50%;}.parent { padding: 8px 0;}label { margin-left: 20px;}input { width: 10

code

<div class="center">
  <div class="parent">
    <label>姓名</label>
    <input type="text">
  </div>
</div>


.center {
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.parent {
  padding: 8px 0;
}
label {
  margin-left:  20px;
}
input {
  width: 100px;
  height: 41px;
}

我想知道为什么输入的顶部边界消失了.如果有人回答我,我将不胜感激.

os：win10

浏览器：chrome 51.0.2704.84m

谢谢.

解决方法

由于转换发生了问题：translate(-50％,– 50％);

您可以修改css以删除转换

.center {
   position: relative;
   width: 100%;
}
.parent {
   padding: 8px 0;
   margin: 15% auto;
   width: 100px;
}
label {
  margin-left:  20px;
}
input {
  width: 100px;
  height: 41px;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!