如何在 Xpages 中将 css 设置为 xe:pageTreeNode

how can I set css with xe:pageTreeNode in Xpages

我完全是css的新手,谢天谢地网上有很多文章,就像"CSS for IBM Notes and Domino XPages Developers"一样,但我仍然对它感到困惑,现在转到我的问题见面,我没有使用自己创建的主题,而是 native bootstrap4 主题

这是我的代码(部分)

<xe:applicationLayout id="applicationLayout1">
    <xp:callback facetName="facetMiddle" id="facetMiddle">
    </xp:callback>
    <xp:this.facets>
        <xe:navigator id="navigator1" xp:key="LeftColumn">
            <xe:this.treeNodes>
                <xe:pageTreeNode page="/View.xsp">
                </xe:pageTreeNode>
                <xe:pageTreeNode page="/View_ip.xsp" imageHeight="27px" imageWidth="27px">
                    <xe:this.image>
                        <![CDATA[#{javascript:var nr=2 ; nr> 0 ? (Math.min(nr, 10) + '.gif') : '';}]]>
                    </xe:this.image>
                </xe:pageTreeNode>
            </xe:this.treeNodes>
        </xe:navigator>
        </xe:this.treeNodes>
        </xe:navigator>
    </xp:this.facets>
    <xe:this.configuration>
        <xe:simpleResponsiveConfiguration collapseLeftColumn="true" collapseLeftTarget=".applayout-column-left"
        collapsedLeftMenuLabel="Menu" navbar="false" pageWidth="fluid" invertedNavbar="true">
        </xe:simpleResponsiveConfiguration>
    </xe:this.configuration>
</xe:applicationLayout>

是的...我使用了 Knut 关于徽章的想法,谢谢~ Knut

html代码(部分):

<div class="applayout-main" id="view:_id1:_id2:applicationLayout1">
    <div role="main" class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 hidden-sm-down applayout-column-left sidebar">
                <ul role="tree" id="view:_id1:_id2:navigator1" class="nav nav-pills nav-stacked xspNavigator">
                    <li class="nav-item">
                        <a role="treeitem" href="/OA/VVUS.nsf/View.xsp" class="nav-link">
                            All Documents
                        </a>
                    </li>
                    <li class="nav-item">
                        <a role="treeitem" href="/OA/VVUS.nsf/View_ip.xsp" class="active nav-link">
                            <img src="/OA/VVUS.nsf/2.gif" height="27px" width="27px">
                            In Process
                        </a>
                    </li>
                </ul>

这就是我想向用户展示的内容:

基本上,我需要这个图像始终正确浮动,这意味着我需要自己添加 css,正如我开始时所说的,虽然我读了很多人的文章,但我不知道它,并在我的代码中尝试这个, 有趣的是它与下面 css...

<style type="text/css" media="print">
    #applicationLayout1 { 
         background-color:blue; 
    } 

    .xspNavigator .nav-item img { 
         float:right; 
    }
</style>

2018/01/06 更新....是的,那是 media="print" 东西...我之前用过这个 css 文件,但永远不要尝试删除它....我怎么这么笨...谢谢你们的帮助...还有一件事我要做....重新安装我的系统....

<style type ="text/css">

.xspNavigator .nav-item img {
    float:right;
}

</style>

2018/01/10:最后一次更新,我想我发现问题是...我不仅删除了媒体="print",还删除了标签...一切都归于平静.. ..

.xspNavigator .nav-item img {
        float:right;
}

我知道它有效,因为“.xspNavigator .nav-item img”,奇怪的是如果我删除 #applicationLayout1 ,它会像这样回来,只是对 css 没有影响了.. .我真的很想不明白为什么....

所以...我的 css 文件有什么问题?谢谢

从 STYLE 标签中删除 media="print"

删除 media="print" 部分,因为它告诉浏览器在打印时只使用 CSS。