如何在R Shiny中对齐动作按钮内的元素？

我在R Shiny中创建动作按钮时遇到了一个格式小难题：想让信息图标（info-circle）和按钮文本实现更好的对齐效果，希望图标和文本能像下图第二个示例那样，处于两个紧密相邻的“列”中，文本换行时不会绕到图标下方。以下是最小可复现代码，请问该怎么实现？

library(shiny)

button_tmp <- function(x, y) {
  actionButton(
    x, y,
    icon = icon("info-circle"),
    style = "text-align:left;
             white-space: normal;
             word-wrap: break-word;"
  )
}

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      button_tmp("test_button", "这段文本较长，需要换行且与图标保持对齐。")
    ),
    mainPanel(
      h2("主面板")
    )
  )
)

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

shinyApp(ui, server)

通过调整按钮内部的布局结构，使用Flexbox就能实现需求。修改button_tmp函数，把图标和文本放在一个弹性容器里，确保文本在图标右侧正常换行：

library(shiny)

button_tmp <- function(x, y) {
  actionButton(
    x, 
    tagList(
      div(style = "display: inline-flex; align-items: flex-start; gap: 8px;",
          icon("info-circle"),
          div(style = "flex: 1; white-space: normal; word-wrap: break-word;", y)
      )
    ),
    style = "text-align: left; padding: 8px;"
  )
}

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      button_tmp("test_button", "这段文本较长，需要换行且与图标保持对齐。")
    ),
    mainPanel(
      h2("主面板")
    )
  )
)

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

shinyApp(ui, server)

• Flexbox布局：用display: inline-flex创建弹性容器，让图标和文本始终并排显示。
• 对齐方式：align-items: flex-start保证图标和文本顶部对齐，不会随文本换行偏移。
• 间距控制：gap: 8px给图标和文本之间留一点空隙，提升可读性。
• 文本换行：文本所在的div设置flex: 1，会占据按钮内剩余空间，配合white-space: normal实现正常换行。

内容的提问来源于Stack Exchange，提问作者Village.Idyot