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代码应用到此页面以获取排列元素的建议都是goo d！

谢谢...

Answer 1

必须有更多的CSS比你发布。很明显，其他事情正在干扰。我建议在Firefox上使用Firebug来检查将CSS应用于这些元素。很有可能你有一个比你期望的范围更广的css类。