Question

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

Answer 1

在这里看起来没问题：https://jsfiddle.net/L22ba1vs/

顺便提一下，您提供的代码不完整，我添加了关闭div和关闭明显丢失的正文标记。

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

我的图标没有向右浮动

1 个答案: