材料設計精簡版 - 在文本字段中的底線與彩色線有一個微小的差距

我想讓Material Design Lite文本字段工作，並且我有一個問題，底部彩色線之間有一個輕微的3-4 px間隔灰色的起跑線。任何MDL文本字段示例我插入我的頁面我得到相同的結果，什麼可以在本地觸發問題？另外我在前端使用react.js。材料設計精簡版 - 在文本字段中的底線與彩色線有一個微小的差距

我在1.2.1的材料設計精簡版。

這裏是一個形象：

這裏是我的代碼：

<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input className="mdl-textfield__input" type="text"/> 
     <label className="mdl-textfield__label" htmlFor="nameField"> 
      Your name 
     </label> 
</div>

來源

2016-09-16 freeBeerTomorrow

你能分享一個工作的例子嗎？小提琴或鋼筆？ –

我使用的任何示例：https://getmdl.io/components/#textfields-section添加到我的代碼時，我會得到相同的差距。但他們在線罰款。 – freeBeerTomorrow

正如@PraneshRavi所說，沒有看到您實施的代碼，我們將無法提供幫助。 – link2pk

我做了自舉使用時面對MDL了同樣的問題，原來的自舉CSS文件添加的保證金5px到Label elment的底部，從而創建5px的間隙。從Bootstrap.css

JSFiddle-Recreating the issue

代碼片段文件

label { 
    display: inline-block; 
    max-width: 100%; 
    margin-bottom: 5px; 
    font-weight: bold; 
}

修復將減少標籤元素爲0px的邊距。

Fix- JsFiddle

.mdl-textfield__label{ 
    margin-bottom:0px; 
}

希望這有助於。

來源

2016-10-13 19:30:08

材料設計精簡版 - 在文本字段中的底線與彩色線有一個微小的差距

回答

相關問題