jQuery treetable文本与icon - span.indenter对齐

Question

我有一个treetable哪些列有一个像这样的图标和文本（这很好）*：

但是，当我减小屏幕宽度时，会发生这种情况：

我希望有这样的事情：

我的HTML是这样的：

<tr data-tt-id="2" data-tt-parent-id="1">
    <td>
        <i class="fa fa-lg fa-file-text-o"></i>
        <a href="javascript:void(0)">Title</a>
    </td>
</tr>

我的js是：

$("#requestForQuotationTable").treetable({
    expandable: true,
    indent: 15
});

由treetable生成的代码是：

<tr data-tt-id="2" data-tt-parent-id="1">
    <td>
        <span class="indenter" style="padding-left: 15px;"></span>
        <i class="fa fa-lg fa-file-text-o"></i>
        <a href="javascript:void(0)">Title</a>
    </td>
</tr>

我已经尝试按照here中的建议在图标中设置左拉，但是它忽略了span.indenter元素，将图标移到左侧。

我也试过this，因为span.indenter没有好结果。

我所尝试的所有内容都让我认为我的问题在于span.indenter，但我无法找到解决这个问题的方法。

在Jayababu的回复后编辑：

<td>
    <span class="indenter" style="padding-left: 30px;float: left;"></span>
    <span style="float:left">
        <i class="fa fa-lg fa-file-text-o" style="vertical-align: middle;"></i>
    </span>
    <span style="float:left"><a href="javascript:void(0)" style="cursor: pointer;">
            hgjkghjk ghjk ghjk ghjk hgjk hgjkghjk</a>
    </span>
</td>

看起来像这样（它仍然忽略了压头，文字看起来不太好=（）：

*我已根据http://ludo.cubicphuse.nl/jquery-treetable/#usage

中的示例创建了这些图片

Answer 1

在您提到的页面中，文件夹图片正在加载为background image 对于span。 如果你需要一个像你在第三个屏幕截图中所示的设计。

  

重组是您案件中唯一的解决方案。

理想情况下，你需要创建2个元素，让它为2 spans一个用于保存图像，另一个用于保存文本。将两个跨度与float:left对齐。

  

请找到以下代码剪切，正常工作

由于我们无法在代码段中显示图像，因此我只用红色和绿色为压头和文件夹图标着色。

＆＃13;

＆＃13;

.folder{

float: left;
background: green;
width: 20px;
height: 20px;
display: inline;


}
.indenter> a{
background: red;

width: 19px;
}
.indenter{
padding-left: 30px;
float: left;
display: inline;
}
.content{
display: inline;
height: auto;
}

＆＃13;

<table>
        <tbody><tr class="branch ui-droppable expanded selected" data-tt-id="3-1" data-tt-parent-id="3" style="display: table-row;">
            <td>
  
    <span class="indenter" ><a href="#" title="Expand">&nbsp;</a></span>
    <span class="folder" >
        <i class="fa fa-lg fa-file-text-o" style="vertical-align: middle;"></i>
    </span>
    <span class="content" ><a href="javascript:void(0)" style="cursor: pointer;">
            hgjkghjk ghjk ghjk ghjk hgjk hgjkghjkhgjkghjk ghjk ghjk ghjk hgjk hgjkghjk</a>
    </span>
  
</td>
        </tr>
    </tbody></table>

＆＃13;

＆＃13;

＆＃13;