Question

我正在尝试使用Material Design Lite库。

将图标放在其中一个标签中并在其下方显示标签文字的最佳方法是什么（请记住最佳做法和可扩展性）。

<html>
  <head>
    <!-- Material Design Lite -->
    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <!-- Simple header with fixed tabs. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
                mdl-layout--fixed-tabs">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Title</span>
        </div>
        <!-- Tabs -->
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
          <a href="#fixed-tab-1" class="mdl-layout__tab is-active"><i class="material-icons">person</i><span class="MY-CLASS-2">TAB 1</span> </a>
          <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
          <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
      </div>
      <main class="mdl-layout__content">
        <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
        <section class="mdl-layout__tab-panel" id="fixed-tab-2">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
        <section class="mdl-layout__tab-panel" id="fixed-tab-3">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
      </main>
    </div>
  </body>
</html>

Answer 1

我可以通过构造其中一个div来实现：

<a href="#scroll-tab-1" class="mdl-layout__tab is-active MY-CLASS-1"><i class="material-icons">person</i><span class="MY-CLASS-2">Profile</span> </a>

并添加以下样式：

.MY-CLASS-1 {
    position: relative;
    width: 60px;
}

.MY-CLASS-2 {
    display: block;
    position: absolute;
    bottom: -12px;
    font-size: smaller;
    left: 198px;
}

https://codepen.io/anon/pen/XKEQZr

如何才能使整个代码更好？

Answer 2

<强> HTML

<div class="item">
    <img src=""/>
    <span class="caption">Tab</span>
</div>

<强> CSS

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 50px;
}
img {
    width: 30px;
    height: 30px;
    background-color: blue;
}
.caption {
    display: block;
}

http://jsfiddle.net/ZhLk4/360/

Answer 3

HTML

<html>
  <head>
  </head>
  <body>
    <ul>
      <li><a href=""><span></span>aaaa</a></li>
      <li><a href=""><span></span>bbbb</a></li>
      <li><a href="">cccc</a></li>
      <li><a href=""><span></span>dddd</a></li>
    </ul>
  </body>
</html>

CSS

ul, ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul li {
  display: inline-block;
}
ul li a {
  background: #efefef;
  padding: 0 15px;
  text-decoration: none;
  line-height: 40px;
  display: inline-block;
}
ul li a span {
  background: url('http://findicons.com/files/icons/2255/cologne/32/user.png') no-repeat #ccc;
  width: 30px;
  height: 30px;
  margin: 0 15px 0 0;
  display: inline-block;
  vertical-align: middle;
}

将文字放在图标图像下方的最佳方法

3 个答案: