Question

我正在尝试使用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

Answer 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>

当然，如果要堆叠输入组而不是彼此相邻，则应向div添加选择器，这些选择器的特异性要比class使用的mdl属性高（除非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;
}

标签卡在顶部并重叠在一起

1 个答案: