标签卡在顶部并在表格中重叠答案

【问题标题】：Labels stuck at top and overlap in form标签卡在顶部并在表格中重叠
【发布时间】：2018-09-08 09:07:02
【问题描述】：

我正在尝试使用getmdl 制作表单。描述了问题并添加了图像：

<div id="signup">
            <form action="#" >
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">

                <input class="mdl-textfield__input" type="text" name="sample1">
                <label class="mdl-textfield__label" for="sample1" style="color: indigo;">Username (Required)</label>

                <input class="mdl-textfield__input" type="text" name="sample2">
                <label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
             </div>
           </form>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style="margin-bottom: 2em;">
              Add (+)
</button>
</div>

如果您想知道我从哪里获得此表单代码：Here

【问题讨论】：

标签： html css material-design

【解决方案1】：

将每个输入和标签组放入各自独立的 div 中，如下所示：

      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" id="asd" type="text" name="sample1">
        <label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
     </div>

     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input" type="text" name="sample2">
         <label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
     </div>

是什么为我解决了这个问题，可能是因为 div 的所有子项都是绝对定位的，无论如何，它应该看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div id="signup">
   <form action="#" >
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
           <input class="mdl-textfield__input" id="asd" type="text" name="sample1">
           <label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
       </div>
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
           <input class="mdl-textfield__input" type="text" name="sample2">
           <label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
       </div>
   </form>
   <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style="margin-bottom: 2em;">
              Add (+)
   </button>
</div>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>

当然，如果您希望输入组堆叠在一起，而不是彼此相邻，您应该将选择器添加到比mdl 使用的class 属性具有更高特异性的 div（除非 MDL 提供您需要添加一个提供此类功能的类名），所以我会为每个要更改的 div 添加一个 id 属性，如下所示：

<div id="stacked" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" id="asd" type="text" name="sample1">
  <label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
</div>

<div id="stacked" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">        
  <input class="mdl-textfield__input" type="text" name="sample2">
  <label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
</div>

然后将其添加到您的 CSS 中：

#stacked {
  display: block;
}

【讨论】：

没问题老兄:)