我试图让我的div包裹<i>
标签然而它没有换行,高度总是高于我的div,而我的<i>
标签没有填充或边距,我试过很多东西,但不起作用,我正在添加我的风格和HTML代码,我也将添加一些截图
CSS
<style>
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
.button-content-ic {
display: inline-block;
margin: auto;
}
body, section, div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
HTML
<div class="button-content-ic">
<i style="color: #fff;" class="material-icons">menu</i> </div>
截图
标记
包装标记
提前感谢您的帮助。
答案 0 :(得分:1)
也许这就是你要找的东西:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: block!important;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
color: #ffffff;
}
.button-content-ic {
background-color: #555555;
display: inline-block;
margin: auto;
}
body,
section,
div,
i {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="button-content-ic"><i class="material-icons">menu</i>
</div>