css - 一些右对齐的 tabPanels Shiny

Question

使用 navbarPage我想要一些 tabPanels右对齐，而其余的 tabPanels和 navbarMenus左对齐:

所以，而不是这个

library(shiny)    
ui =  tagList(
  navbarPage(
    title = "My app",
    navbarMenu("Left1",
               tabPanel("Subleft11"),
               tabPanel("Subleft12")),
    tabPanel("Left2"),
    tabPanel("Left3"),
    tabPanel("Right1"),
    tabPanel("Right2")
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

我想得到这样的东西:



来自 GyD 的解决方案适用于 tabsetPanel但我无法适应 navbarPage .我试着添加

tags$head(
    tags$style(HTML(
      ".navbar ul li:nth-child(4) { float: right; }
      .navbar ul li:nth-child(5) { float: right; }"
    ))),

但没有预期的效果。

Answer 1

你可以用一些css来做到这一点。
这将是一个简单的例子，它对齐类 navbar-nav 中的第 4 个和第 5 个列表元素。 float: right; .

通过包含 right: 150px;对于第四个 child ，您将标签保持在正确的顺序。

应用程序

library(shiny)   
library(shinythemes)  

ui =  tagList(
    tags$head(tags$style(HTML("
                           .navbar-nav {
                           float: none !important;
                           }
                           .navbar-nav > li:nth-child(4) {
                           float: right;
                           right: 150px;
                           }
                           .navbar-nav > li:nth-child(5) {
                           float: right;
                           }
                           "))),
  navbarPage(
    title = "My app",
    theme = shinytheme("cerulean"),
    navbarMenu("Left1",
               tabPanel("Subleft11"),
               tabPanel("Subleft12")),
    tabPanel("Left2"),
    tabPanel("Left3"),

    tabPanel("Right1"),
    tabPanel("Right2")

    )
    )

server <- function(input, output, session) {}

shinyApp(ui, server)