材质设计精简版-文本字段中的底线与彩色线之间存在细微间隙 [英] Material Design Lite - Bottom Line in text field has a slight gap with colored line

问题描述

我正在尝试使Material Design Lite文本字段正常工作，但我遇到一个问题，即底部彩色线在灰色起始线之间存在3-4 px的细微间隙.我插入页面的任何MDL文本字段示例都得到相同的结果，是什么在本地触发问题?我也在前端上使用react.js.

I am trying to get Material Design Lite text field to work and I have an issue where the bottom colored line has a slight 3-4 px gap between the gray starting line. Any MDL text Field example I plug into my page I get the same result, what can locally be triggering the issue? Also I am using react.js on the frontend.

我在材料设计精简版1.2.1上.

I am on 1.2.1 of material design lite.

这是一张图片:

这是我的代码:

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

推荐答案

当与boostrap一起使用时，我确实遇到了MDL的相同问题，结果是boostrap css文件为其底部的Label元素增加了5px的边距. 5px的间隙.

I did face the same issue with MDL when used with boostrap and turns out the boostrap css file adds a margin of 5px to its bottom for the Label elment which creates a 5px gap.

JSFiddle-重新创建问题

Bootstrap.css文件中的代码段

Code snippet from Bootstrap.css file

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

修复会将标签元素的下距降低到0px.

Fix would be reduce the margin-bottom of the label element to 0px.

修复-JsFiddle

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

希望这会有所帮助.

这篇关于材质设计精简版-文本字段中的底线与彩色线之间存在细微间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！