如何在R Shiny环境中使用HTML无序列表调整项目符号缩进？

要调整模态框里列表项的对齐（让换行后的文本对齐到项目符号下方，而非左边缘），可以通过自定义CSS样式实现，以下是两种实用方案：

方案一：直接给列表标签添加行内样式 #

适合仅调整单个列表的场景，直接在<ul>标签内设置样式：

library(shiny)

ui <- fluidPage(fluidRow(uiOutput("header")))

server <- function(input, output, session) {
  output$header <- renderUI({
    fluidPage(
      paste("Testing modal:"),
      tags$button(
        id = "show", class = "btn action-button",
        tags$img(src = "https://images.plot.ly/language-icons/api-home/python-logo.png")
      )
    )
  })
  
  observeEvent(input$show, {
    showModal(modalDialog(
      tags$div(style="text-align:justify;",
               HTML("
                    <p>Studying the pig:</p>
                    <ul style='padding-left: 1.5em; list-style-position: outside;'>
                    <li>Pigs eat anything, and they will keep eating even when they are full, which is one of the reasons they get so large</li>
                    <li>Pigs are fat, but this fat helps them stay warm in cold environments and provides energy when food is scarce</li>
                    </ul>
                    "))
    ))
  })
}

shinyApp(ui, server)

• padding-left: 1.5em：给列表左侧留出足够空间放置项目符号
• list-style-position: outside：让项目符号显示在列表项文本外部，避免嵌入文本导致对齐混乱

方案二：添加全局模态框列表样式 #

如果应用内多个模态框需要统一调整列表样式，可在模态框头部添加自定义CSS，一次性生效：

library(shiny)

ui <- fluidPage(fluidRow(uiOutput("header")))

server <- function(input, output, session) {
  output$header <- renderUI({
    fluidPage(
      paste("Testing modal:"),
      tags$button(
        id = "show", class = "btn action-button",
        tags$img(src = "https://images.plot.ly/language-icons/api-home/python-logo.png")
      )
    )
  })
  
  observeEvent(input$show, {
    showModal(modalDialog(
      # 自定义模态框内列表样式
      tags$head(tags$style(HTML("
        .modal-dialog ul {
          padding-left: 1.8em;
          list-style-position: outside;
        }
        .modal-dialog li {
          text-indent: -0.3em;
        }
      "))),
      tags$div(style="text-align:justify;",
               HTML("
                    <p>Studying the pig:</p>
                    <ul>
                    <li>Pigs eat anything, and they will keep eating even when they are full, which is one of the reasons they get so large</li>
                    <li>Pigs are fat, but this fat helps them stay warm in cold environments and provides energy when food is scarce</li>
                    </ul>
                    "))
    ))
  })
}

shinyApp(ui, server)

• text-indent: -0.3em：让列表项文本向左偏移少量距离，刚好对齐到项目符号正下方，换行后的文本也会保持该对齐效果

内容的提问来源于stack exchange，提问作者Village.Idyot