将内嵌图像显示为td

Question

我只想在表格中显示我已放入TD中的内联3个图标，但找不到解决方法。

我得到以下代码：

<table id="tableResults" class="col-xs-12 col-lg-12">
      <thead style="border-bottom:1px solid #EEEEEE; line-height: 2em;">
         <tr>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">Name</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadas</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1">ABBVIE</td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td><i class="icon icon-view_list"></i><i class="icon icon-view_list"></i><i class="icon icon-view_list"></i></td>
         </tr>
      </tbody>
</table>

而且我总是将结果显示在块中。 我从img和ul li的td中试用了它，并与display：inline一起使用，但是在这里没有带i标签的td。

有人可以帮我吗？

Answer 1

所以这很好用：

<table id="tableResults" class="col-xs-12 col-lg-12">
      <thead style="border-bottom:1px solid #EEEEEE; line-height: 2em;">
         <tr>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">Name</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadas</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
            <th class="col-xs-1 col-lg-1 col-md-1 col-sm-1">dsadsa</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1">ABBVIE</td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td class="col-xs-1 col-lg-1 col-md-1 col-sm-1"></td>
            <td><i class="glyphicon glyphicon glyphicon-asterisk"></i><i class="glyphicon glyphicon glyphicon-th-list"></i><i class="glyphicon glyphicon glyphicon-ok"></i></td>
         </tr>
      </tbody>
</table>

这意味着您图标上的样式可能存在问题。 我会尝试将它们与glyphicon上的样式匹配。

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

我特别要看一下图标的基类是否具有inline-block显示。