使用 UI Binder 时未解析 CSS 选择器
基本上,我正在构建一个水平导航栏。我有以下标记:
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我只是问,因为您没有在示例代码中包含此内容:您是否仔细检查过是否有一个包含
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 theul
?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
?