IMAGE:icon not floating to right and its meant to be perfect circle but its cut
我试图将图标推到标题的右侧，但都无济于事。这是 html:
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout--fixed-header mdl-layout__header-row">
</div>
<div class="mdl-layout--fixed-header mdl-layout--fixed-header mdl-layout__header-row">
<h2>example.com</h2><button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style='float:right' id="account">
<i class="material-icons md-36 orange600">account_circle</i></button>
</div>
<div class="mdl-layout--fixed-header mdl-layout__header-row">
</div>
<div class="mdl-layout__header-row portfolio-navigation-row">
<nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
{% block header %}
{% endblock %}
</nav>
</div>
</header>
使用 CSS:
.mdl-demo .mdl-layout__header-row {
padding-left:10px;
height:30px;
}
.material-icons.md-36 {
font-size: 36px;
float:right;
}
.material-icons.orange600 { color: #ff4081;
float:right;
}
最佳答案
这里看起来没问题:https://jsfiddle.net/L22ba1vs/
顺便说一句，您提供的代码不完整，我加回了明显缺失的结束 div 和结束 body 标签。
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout--fixed-header mdl-layout__header-row">
</div>
<div class="mdl-layout--fixed-header mdl-layout--fixed-header mdl-layout__header-row">
<h2>example.com</h2><button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style='float:right' id="account">
<i class="material-icons md-36 orange600">account_circle</i></button>
</div>
<div class="mdl-layout--fixed-header mdl-layout__header-row">
</div>
<div class="mdl-layout__header-row portfolio-navigation-row">
<nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
{% block header %}
{% endblock %}
</nav>
</div>
</header>
</div>
</body>
关于html - 我的图标没有向右浮动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38786196/