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