jQuery 可树化文本与图标对齐 - 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 中的建议在图标中设置向左拉，但随后它忽略了 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。如果您需要第三个屏幕截图中所示的设计。

Restructuring is the only one solution in your case.

理想情况下，您需要创建 2 个元素，让它成为 2 个 spans，一个用于保存图像，另一个用于保存 text.Align，两个跨度都为 float:left。

Please find the below code snipped,working fine as you need

由于我们无法在代码片段中显示图像，所以我刚刚将压头和文件夹图标涂上了红色和绿色。

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

jQuery 可树化文本与图标对齐 - span.indenter

jQuery treetable text aligned to icon - span.indenter

html

css

treetable