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

发布于 2024-12-17 22:49:19 字数 1840 浏览 0 评论 0原文

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

<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 模板内的 code>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>

RESOLVED

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

Basically, I am building a horizontal navigation bar. I have following markup:

<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 has following rules:

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;
}

When using rules as defined above, everything works perfect. The problem is that I have ul elements in other parts of page, so I've added div.navbar before each rule like this:

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

But those rules are not applied to ul elements inside UI Binder template. What's wrong with my code?

Here is the generated HTML (normally on one line):

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

RESOLVED

styleName="navbar" must be styleName="{style.navbar}"

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

惟欲睡 2024-12-24 22:49:19

我只是问,因为您没有在示例代码中包含此内容:您是否仔细检查过是否有一个包含 ul

另外,如果 正在生成 div,则它不会在您提供的代码中关闭。也许您需要一个

I only ask because you didn't include this in your example code: have you double checked there is a <div class="navbar"> that wraps the ul?

Also, if <g:HTMLPanel styleName="navbar"> is generating the div, it is not closed in the code your provided. Maybe you need a </g:HTMLPanel?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文