调整shinydashboardPlus头部UI元素的位置与对齐间距

你可以通过添加自定义CSS规则同时解决垂直对齐和间距过大两个问题，修改后的完整可运行代码如下：

library(shiny)
library(shinycssloaders)
library(shinydashboard)
library(shinyjs)
library(shinydashboardPlus)
library(shinyWidgets)

# Define UI for application that draws a histogram
ui <- dashboardPage(skin = 'blue', 
                    
shinydashboardPlus::dashboardHeader(title = 'Example',
    leftUi = tagList(
        useShinyjs(),
        # 新增自定义CSS规则
        tags$style(HTML("
        /* 调整头部交互元素垂直位置，与左侧汉堡按钮对齐 */
        .main-header .navbar-left a {
          margin-top: 15px;
        }
        /* 缩小提示消息与开关的上下间距 */
        #labelMessage {
          margin-top: -8px !important;
          display: inline-block;
          color: #fff;
        }
        ")),
        switchInput(inputId = 'swtLabels', label = 'Labels', value = TRUE,
                    onLabel = 'Label 1', offLabel = 'Label 2',
                    onStatus = 'info', offStatus = 'info', size = 'mini', 
                    handleWidth = 230),
        htmlOutput(outputId = 'labelMessage')
        )
    ),
    dashboardSidebar(),
    dashboardBody()
)

server <- function(input, output) {  
  observeEvent(input$swtLabels, {
     shinyjs::html(id = 'labelMessage', html = 'Starting...')
     shinyjs::showElement(id = 'labelMessage')
     Sys.sleep(1)
     shinyjs::html(id = 'labelMessage', html = 'Done') 
     shinyjs::hideElement(id = 'labelMessage', anim = TRUE, animType = 'fade', time = 2.0) 
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

如果最终效果和预期有偏差，可以自行调整CSS中margin-top的数值：数值越大对应元素越靠下，负数值越大上下间距越小。

内容的提问来源于stack exchange，提问作者KirkD-CO