移除RShiny中CSS SortableJS换行：使排名数字与字母同行

只需调整CSS伪元素的布局样式，就能让排名数字和字母紧邻显示在同一行。修改后的完整代码如下：

library(shiny)
library(sortable)

addDiv <- function(x) {lapply(x,function(x){tags$div(x)})}

ui <- fluidPage(
  
  tags$head(
    tags$style(HTML('
      #rank_list_basic > div {cursor: move; /* fallback */
                        cursor: grab; cursor: pointer;}
      #rank_list_basic {list-style-type: none;  counter-reset: css-counter 0;}
      #rank_list_basic > div {counter-increment: css-counter 1;}
      /* 调整伪元素样式，确保数字与字母同行 */
      #rank_list_basic > div:before {content: counter(css-counter) ". "; display: inline-block; vertical-align: middle;}
      ')
    )
  ),
  
  fluidRow(
            rank_list(
              text = "拖动项目调整顺序",
              labels = addDiv(c("A","B","C","D","E")),
              input_id = "output",
              css_id = "rank_list_basic"
            ),
          verbatimTextOutput("results_basic")
      )
)

server <- function(input, output) {
  output$results_basic <- renderPrint({
    input$output
  })

}

shinyApp(ui, server)

修改说明 #

1. 修正了原CSS中的语法错误：将无效的#fallback改为标准CSS注释/* fallback */；
2. 在#rank_list_basic > div:before样式中添加display: inline-block;，强制排名数字伪元素与字母内容处于同一行；
3. 额外添加vertical-align: middle;，让数字和字母垂直居中对齐，优化视觉效果（若不需要可仅保留前一项修改）。

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