Question

我正在学习实现css并遵循添加表单的文档。但是文本字段具有重叠的文本。这是文档http://materializecss.com/forms.html

<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<title></title>
</head>
<body>
  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">Last Name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input disabled value="I am not editable" id="disabled" type="text" class="validate">
          <label for="disabled">Disabled</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">Password</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          This is an inline input field:
          <div class="input-field inline">
            <input id="email" type="email" class="validate">
            <label for="email" data-error="wrong" data-success="right">Email</label>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

<script type="text/javascript">

  $(document).ready(function() {
  Materialize.updateTextFields();
});
</script> 
</html>

Answer 1

标签和占位符重叠，因为您尚未添加类＆＃34;有效＆＃34;标签。该类负责转换输入元素之上的文本（ transform：translateY（-140％）; ）。检查materialize css网站上的元素以获取该类的更多详细信息。如果这对您没有帮助，请在评论中告诉我。请找到相同的工作js小提琴：https://jsfiddle.net/dsfjodjb/3/

 <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name" class="active">First Name</label>
 </div>

materializecss表现得很好

1 个答案: