Syncfusion TreeView控件CSS问题

Question

我正在使用 Syncfusion TreeView 控件在网页上创建文件夹浏览器，我们的设计使用 CSS 来控制表格的布局，但我不知道如何阻止表格 CSS 影响 TreeView 的布局。

目前我的 Treeview 看起来像这样：

http://imagebin.org/63035

查看复选框和文本标签不像文件夹图标那样与树的左侧对齐。

我的 TreeView 定义如下：

           <div class="TreeViewTable">
                <cc1:TreeView ID="tvFileSystem" 
                    runat="server" 
                    Width="100%"
                    Height="500px"
                    CssClass="TreeView" 
                    ImageBaseURL="/images/treeIcons/"
                    DropChildCssClass="DropChildCss" 
                    EditNode="False" 
                    OnNodeExpanded="tvFileSystem_NodeExpanded"
                    OnNodeCheckChanged="tvFileSystem_NodeCheckChanged" 
                    AutoPostBackOnNodeCheckChanged="true" 
                    AutoCheckChildNodes="true">
                </cc1:TreeView>

                <asp:ListBox ID="listFiles" runat="server" Visible="false" Height="150px"></asp:ListBox>
            </div>

控件生成的 HTML 看起来像这样：

<div id="ctl00_mainPageContent_tvFileSystem_R2" class="tvItemRow" style="width:100%;">
<table cellspacing="0" cellpadding="0">
<tr>
    <td align="right" class="tvLineImgTD">
        <img src="/WebResource.axd" alt="" />
    </td>

    <td align="right" class="tvLineImgTD tvLineImgTD_1">
        <img src="/WebResource.axd" alt="" />
    </td>

    <td>
        <div id="ctl00_mainPageContent_tvFileSystem_I2" class="tvItem">
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td     id="ctl00_mainPageContent_tvFileSystem_I2_TI" class="tvImgCell">
                        <div id="ctl00_mainPageContent_tvFileSystem_I2_CI" class="tvImgCont"><img src="/images/treeIcons/folder.gif" id="ctl00_mainPageContent_tvFileSystem_I2_I" class="tvImg" alt="" />
                        </div>
                    </td>

                    <td id="ctl00_mainPageContent_tvFileSystem_I2_TB" class="tvCheckCell">
                        <input name="ctl00$mainPageContent$tvFileSystem_I2_B" type="checkbox" id="ctl00_mainPageContent_tvFileSystem_I2_B" class="tvCheck" onclick="_sfctl00_mainPageContent_tvFileSystem.OnClick(this, event)" onmousedown="_sfctl00_mainPageContent_tvFileSystem.OnMouseDown(this, event)" />
                    </td>

                    <td id="ctl00_mainPageContent_tvFileSystem_I2_TT" class="tvTextCell">
                        <table cellspacing="0" cellpadding="0">
                            <tr>
                                <td id="ctl00_mainPageContent_tvFileSystem_I2_CT" class="tvTextCont" style="white-space:nowrap;">
                                    1
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>
</table>
</div>

我的 CSS 代码看起来像这样：

.TreeView 
{ 
  background-color:White;
  padding-top:4px; 
  padding-left:1px; 
  border: #7C7C94 1px solid; 
  cursor:default; 
  text-align: left;
}

.tvItemRow
{
    font-size:9pt;
    border: none;
    padding:0;
    width:auto;
    text-align:left;
}

/* TreeView Table Properties */

div.TreeViewTable
{
    border: none;
    border-bottom: none;
    padding:0;
    text-align:left;
}

div.TreeViewTable table {
    width:inherit;

}

div.TreeViewTable table tr th {
    border: none;
    padding: 0px;
    letter-spacing: 1px;
}

div.TreeViewTable table tr td {
    border: none;
    padding: 0px;
    letter-spacing: 1px;

}

div.TreeViewTable table tr.alt td {
    background-color:#EFEFEF;
}

任何有关应用于此页面以使元素排列的 CSS 代码的建议都会很好！

谢谢...

Answer 1

CSS 内容一定比您发布的内容还要多。显然有其他东西在干扰。我建议在 Firefox 上使用 Firebug 来检查哪些 CSS 应用于这些元素。很可能您的 css 类的范围比您预期的要广泛。