为什么材料图标i元素与相邻的输入元素重叠?

时间:2019-01-22 14:41:15

标签: material-design

我不确定这是否是与物料相关的代码。 但是,如果您看到此代码,则会发现i元素的宽度比红色边框显示的宽度还要宽。您无法导航到文本输入的开头,因为它仍指向材质图标help_circle。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<style type="text/css">
div.tipped-small
{
    margin-top:-10px;
    margin-right:10px;    
    display:inline-block;
    width:15px;
    height:15px;
    padding:5px;
    border-radius:50%;
    cursor:pointer;
    position:relative;
    overflow:none;
}
div.tipped-small i
{
    width:15px;
    color:#4857BA;
    font-size:15px;
    line-height:15px;
    cursor:pointer;    
    position:absolute;
    overflow:none;
}    
</style>
</head>
<body>
<div id="container">
    <div class="tipped-small">
        <i class="material-icons" style="border:1px solid red">help_circle</i>        
    </div>    
    <input type="text" style="height:15px;border:1px solid red"/>
</div>    
</body>
</html>

https://codepen.io/anjanesh/pen/LqYXZe

如何使 i 标签只有15px?

0 个答案:

没有答案