Question

基本上，我正在构建一个水平导航栏。我有以下标记：

<ui:style src="../common.css" type="client.resources.HomeResources.Style">
    @external gwt-Anchor;
    .gwt-Anchor {
        text-decoration: none;
    }
</ui:style>
<g:HTMLPanel styleName="navbar">
    <ul>
        <li><g:Anchor ></g:Anchor> |</li>
        <li><g:Anchor ></g:Anchor> |</li>
        <li><g:Anchor ></g:Anchor> |</li>
        <li><g:Anchor ></g:Anchor> |</li>
        <li><g:Anchor ></g:Anchor> |</li>
        <li><g:Anchor ></g:Anchor> |</li>
        <li><g:Anchor ></g:Anchor></li>
    </ul>

common.css有以下规则：

ul {
    margin: 0;
    padding: 0;
    text-align: left;
    font-weight: bold;
    line-height: 25px;
}

ul li {
    display: inline;
    text-align: right;
}

ul li a {
    color: #0077C0;
    font-size: 12px;
    margin-right: 15px;
    padding: 4px 0 4px 5px;
    text-decoration: none;
}

ul li a:HOVER {
    color: #F0721C;
}

使用上面定义的规则时，一切都很完美。问题是我在页面的其他部分有ul个元素，因此我在每个规则之前添加了div.navbar，如下所示：

div.navbar ul{}
div.navbar ul li{}
etc...

但是这些规则不适用于UI Binder模板中的ul元素。我的代码出了什么问题？

这是生成的HTML（通常在一行上）：

<div class="navbar"><ul>
   <li><a class="gwt-Anchor">Item 1</a> |</li>
   <li><a class="gwt-Anchor">Item 2</a> |</li>
   <li><a class="gwt-Anchor">Item 3</a></li>
</ul></div>

分辨

styleName="navbar"必须为styleName="{style.navbar}"

Answer 1

我只是问你，因为你没有在你的示例代码中包含这个：你是否仔细检查了<div class="navbar">包裹了ul？

此外，如果<g:HTMLPanel styleName="navbar">正在生成div，则不会在您提供的代码中关闭它。也许你需要一个</g:HTMLPanel？

使用UI Binder时未解析CSS选择器

分辨

1 个答案: