如何在 Xpages 中使用 xe:pageTreeNode 设置 css

Question

我完全是css新手，感谢上帝，网上有很多文章，就像“IBM Notes和Domino XPages开发人员的CSS”，但我仍然对它感到困惑，现在转到我遇到的问题，我没有使用我自己的创建主题，而是原生 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：最终更新，我想我发现问题是......我不仅删除了 media="print"，还删除了标签......一切都归于平静......

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

---

我知道它可以工作，因为“.xspNavigator .nav-item img”，奇怪的是如果我删除 #applicationLayout1 ，它会像这样回来，只是不再对 css 产生影响......我真的不能不明白为什么....

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

Answer 1

从 STYLE 标记中删除 media="print"。

Answer 2

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