如何在Shiny应用中水平对齐picker输入框与操作按钮？

问题根源在于pickerInput自带顶部标签，整体控件高度大于操作按钮，按钮默认顶部对齐，导致视觉上按钮高于picker的输入框部分。以下是两种可行的调整方案：

方案一：给按钮所在列添加顶部外边距 #

直接给存放按钮的column设置margin-top，数值适配picker标签的高度，让按钮下移至与picker输入框对齐：

library(shiny)
library(shinyWidgets) # 注意：pickerInput需加载此包

ui <- fluidPage(
    
    div(
      class = "page-header",
      
      fluidRow(
        column(
          width = 8,
          h3("Tab Header")
        ),
        
        column(
          width = 2,
          
          pickerInput(
            inputId = "picker", 
            label   = "Picker:", 
            choices = c("Option 1", "Option 2", "Option 3")
          )
        ),
        
        column(
          width = 2,
          style = "margin-top: 27px;", # 添加此样式实现对齐
          
          actionButton(inputId = "apply_1",
                       label   = "Action 1",
                       icon    = icon("play")),
          
          actionButton(inputId = "reset_1",
                       label   = "Action 2",
                       icon    = icon("sync"))
        )
      )
    )
)

server <- function(input, output) {

}

shinyApp(ui, server)

方案二：用CSS统一调整按钮位置 #

通过全局CSS设置page-header内所有操作按钮的顶部外边距，适合存在多个同类按钮的场景：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
    tags$head(
        tags$style(HTML("
            .page-header .action-button {
                margin-top: 27px;
            }
        "))
    ),
    
    div(
      class = "page-header",
      
      fluidRow(
        column(
          width = 8,
          h3("Tab Header")
        ),
        
        column(
          width = 2,
          
          pickerInput(
            inputId = "picker", 
            label   = "Picker:", 
            choices = c("Option 1", "Option 2", "Option 3")
          )
        ),
        
        column(
          width = 2,
          
          actionButton(inputId = "apply_1",
                       label   = "Action 1",
                       icon    = icon("play")),
          
          actionButton(inputId = "reset_1",
                       label   = "Action 2",
                       icon    = icon("sync"))
        )
      )
    )
)

server <- function(input, output) {

}

shinyApp(ui, server)

注：如果27px的数值不够精准，可根据实际页面显示效果微调（比如25px或30px）。

内容的提问来源于stack exchange，提问作者The Rookie