将内联图像显示到 td答案

【问题标题】：Display inline images into td将内联图像显示到 td
【发布时间】：2016-02-11 09:21:02
【问题描述】：

我只想在表格中的 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。

有人可以帮助我吗？

【问题讨论】：

您当前是否在此项目中使用引导程序？
是的，我正在使用引导 css 是的

标签： html twitter-bootstrap image html-table

【解决方案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;
}

我特别想看看icon的基类是否有inline-block的显示。

【讨论】：