Shiny应用：numericInputIcon标签内联对齐及输入框单列对齐实现

直接上修改后的代码，能同时满足标签内联显示、主子类层级结构，以及所有输入框对齐同一列的需求：

library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$head(tags$style(HTML("
        /* 统一表单组布局：标签+输入框内联，固定标签宽度 */
        #inline .form-group {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
        }
        #inline label {
          width: 120px; /* 固定标签宽度，确保输入框对齐 */
          text-align: left;
          margin-right: 10px;
        }
        /* 调整numericInputIcon的输入框和图标容器宽度 */
        #inline .input-group {
          flex: 1;
          max-width: 200px;
        }
        /* 子类标签缩进，体现层级 */
        .sub-item label {
          padding-left: 2em;
        }
      "))),
      
      box(
        title = "Shiny Box",
        status = "success",
        solidHeader = TRUE,
        width = 6,
        
        div(id="inline", style="width:100%;",
            div(HTML("<b>TEST</b>")),
            br(),
            # 主项：test1
            numericInputIcon("A", h5("test1"), value = 20, icon = icon("percent")),
            # 子项：test1A、test1AA，添加sub-item类实现缩进
            div(class = "sub-item",
                numericInputIcon("B", h5("test1A"), value = 40, icon = icon("percent"))),
            div(class = "sub-item",
                numericInputIcon("C", h5("test1AA"), value = 60, icon = icon("percent"))),
            # 主项：test2
            numericInputIcon("D", h5("test2"), value = 20, icon = icon("percent")),
            # 子项：test2A、test2AA
            div(class = "sub-item",
                numericInputIcon("E", h5("test2A"), value = 40, icon = icon("percent"))),
            div(class = "sub-item",
                numericInputIcon("F", h5("test2AA"), value = 60, icon = icon("percent"))),
            # 总计项，调整样式对齐
            div(class = "total-item",
                currencyInput("X", "Total", value = 0.3, format = "percentageUS2dec"))
        )
      )
    )
  ),
  server = function(input, output) { }
)

关键改动说明： #

1. 移除column偏移，改用标签缩进：删掉原来的column(12, offset=1)，通过给子项添加sub-item类，用padding-left实现标签缩进，既保留层级，又不会让输入框整体偏移。
2. 统一表单布局CSS：用flex布局实现标签和输入框内联，固定标签宽度（width:120px），这样所有输入框的起始位置完全对齐。
3. 调整输入框容器宽度：给.input-group设置flex:1和固定最大宽度，确保输入框大小一致，同时适配容器宽度。
4. 统一总计项样式：把currencyInput放在单独容器里，确保和其他输入框的布局规则一致。

你可以根据实际需求调整标签宽度（120px）和缩进量（2em），适配不同的界面尺寸。

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