2017-05-19 25 views
1

我正在學習實現css並遵循添加表單的文檔。但文本字段有重疊的文本。這裏是文檔http://materializecss.com/forms.htmlmaterializecss behaviour wiered

這是我在它的嘗試:https://jsfiddle.net/dsfjodjb/

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

+0

你有包括兌現JS文件?它是否正確加載? –

回答

1

標籤和佔位符重疊,因爲你還沒有加入班級「活動」的標籤 。該類負責將輸入元素頂部的文本進行變換(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> 
+0

除了你的名字字段之外,其他所有人的行爲都不一樣(帶有重疊的文本) – anekix

+0

我也從官方文檔中選擇了這個例子(我在我的問題中提到了相同的鏈接)。爲什麼會有人想要這樣的事情? – anekix

+0

它適合我。它們不重疊。你在檢查正確的小提琴嗎? –