shinyMobile中f7Radio组件横向布局实现方法咨询

shinyMobile的f7Radio()默认确实是纵向排列，要改成标签居左、选项同行的横向布局，核心是通过自定义CSS覆盖默认的Flex布局规则。下面是完整的实现示例：

library(shiny)
library(shinyMobile)

ui <- f7Page(
  title = "f7Radio横向布局示例",
  f7SingleLayout(
    navbar = f7Navbar(title = "f7Radio横向调整"),
    # 自定义CSS样式
    tags$style(HTML("
      /* 调整radio组的整体布局为横向 */
      .f7-list-item--radio {
        flex-direction: row !important;
        align-items: center;
      }
      /* 让标签居左，占据固定宽度并留出右侧间距 */
      .f7-list-item--radio .item-title {
        flex: 0 0 auto;
        margin-right: 15px;
      }
      /* 让radio选项容器横向排列，控制选项间距 */
      .f7-list-item--radio .item-input {
        display: flex;
        gap: 20px;
      }
      /* 调整单个radio选项的按钮与文字垂直居中 */
      .f7-list-item--radio .radio {
        display: flex;
        align-items: center;
      }
    ")),
    # 示例f7Radio组件
    f7Radio(
      inputId = "radio_test",
      label = "选择一项：",
      choices = c("选项A", "选项B", "选项C"),
      selected = "选项A"
    )
  )
)

server <- function(input, output) {
  observe({
    print(input$radio_test)
  })
}

shinyApp(ui, server)

关键CSS说明： #

• .f7-list-item--radio：将默认的纵向Flex布局改为横向，让标签和选项容器在同一行
• .item-title：固定标签的宽度并设置右侧间距，确保标签稳定居左，不会被选项挤压
• .item-input：把选项容器设为横向Flex布局，用gap属性控制选项之间的间距
• .radio：让每个选项的单选按钮和文字垂直居中，保证视觉对齐

运行这个示例后，就能看到标签居左、所有radio选项在同一行横向排列的效果。

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