GWT:更改树行的填充？

Question

GWT:更改树行的填充？

GWT树看起来大致如下:

<div class="gwt-Tree">
    <div style="padding-top: 3px; padding-right: 3px;
                padding-bottom: 3px; margin-left: 0px;
                padding-left: 23px;">
         <div style="display:inline;" class="gwt-TreeItem">
              <table>
                   ...
              </table>
         </div>
    </div>
    <div ...>
    </div>
    ...
</div>

Run Code Online (Sandbox Code Playgroud)

我的问题是:我应该如何更改单个树行的填充？我想我可以按照设置CSS规则的方式做一些事情,.gwt-Tree > div但这看起来很糟糕.有更优雅的方式吗？

解决方案:显然没有更优雅的方式.以下是我们所做的,FWIW:

 .gwt-Tree > div:first-child { 
      width: 0px !important; 
      height: 0px !important; 
      margin: 0px !important; 
      padding: 0px !important; 
 } 

 .gwt-Tree > div {
      padding: 0px 5px !important;
 }

 .gwt-Tree > div[hidefocus=true] {
      width: 0px !important;
      height: 0px !important;

      margin: 0px !important;
      padding: 0px !important;
 }

Run Code Online (Sandbox Code Playgroud)

Answer 1

eas*_*wee 2

你可以这样做：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    .gwt-Tree {background:green;}
    .gwt-Tree div {padding-top: 3px; padding-right: 3px;padding-bottom: 3px; margin-left: 0px;padding-left: 23px;background:gray;}
    .gwt-Tree div .gwt-TreeItem {padding:0;margin:0;background:red;color:#fff;}
    </style> 
</head>
<body>
<div class="gwt-Tree">
    <div>
         <div class="gwt-TreeItem">
            random
         </div>
    </div>
    <div>
         <div class="gwt-TreeItem">
            random
         </div>
    </div>
</div> 
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

请注意，.gwt-Tree div 将影响所有子 div，因此您必须使用 .gwt-Tree div .gwtTreeItem 将它们重置回您想要的样式。

关于你所说的“hacky >” - >选择器在所有浏览器中都受支持，除了IE6无法识别它。

归档时间：	15 年，11 月前
查看次数：	4570 次
最近记录：	14 年，8 月前