Question

我有四个项目，我想水平对齐，但最后一个没有。

我的代码是：

<span class="rate">8.5</span>
<span><i class="material-icons md-18">star_rate</i></span>
<span style="color:darkgrey" class="release-date">2000</span>
<span style="color:darkgrey"><i class="material-icons md-18">date_range</i></span>

编辑：

即使添加display: inline-block，它也无法运作。这是我的HTML：

<div class="info">
              <span class="rate">8.5</span>
              <span><i class="material-icons md-18">star_rate</i></span>
              <span style="color:darkgrey" class="release-date">2000</span>
              <span style="color:darkgrey"><i class="material-icons md-18">date_range</i></span>
</div>

这是我的CSS：

.info {
       display: inline-block;
}

编辑2：

使用bootsrap列的完整代码

<div class="row">
        <div class="panel panel-default">
         <div class="panel-body">
        {% for i in "123456" %}
            <div class="col-md-2">
                        <a class="title movie" href="/series/{{ 1 }}/"><img class="img-responsive"</a>
                        <a class="title movie" href="/series/{{ 1 }}/"></a><br>
                        <div class="info">
                            <span id="1" class="rate">8.5</span>
                            <span id="2" ><i class="material-icons md-18">star_rate</i></span>
                            <span id="3" style="color:darkgrey" class="release-date">2000</span>
                            <span id="4" style="color:darkgrey"><i class="material-icons md-18">date_range</i></span>
                        </div>
            </div>
        {% endfor %}
        </div>
        </div>
    </div>

Answer 1

我没有看到对齐方式发生任何变化。

 <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
        
<span class="rate">8.5</span>
<span><i class="material-icons md-18">star_rate</i></span>
<span style="color:darkgrey" class="release-date">2000</span>
<span style="color:darkgrey"><i class="material-icons md-18">date_range</i></span>
 <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>

如何将范围与文字和图标对齐

1 个答案: