jQuery treetable 文本与图标对齐 - span.indenter

Question

我有一个树表，其中列有一个图标和这样的文本（这很好）*：

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

我想要这样的东西：

我的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 中的建议在图标中设置 pull-left，但随后它会忽略 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 对齐。

请找到以下代码被剪断，可以根据需要正常工作

由于我们无法在代码 sn-p 中显示图像，所以我刚刚将压头和文件夹图标着色为红色和绿色。

.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;
}

<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>