如何将标签与显示的文本对齐？答案

【问题标题】：How can I align the tag with the displayed text?如何将标签与显示的文本对齐？
【发布时间】：2020-06-02 22:36:35
【问题描述】：

我正在使用下面的代码构建一个闪亮的应用程序，但我不明白为什么标签下方显示文本，它应该在同一行，有人知道如何修复它吗？修复了this 问题中的第一个答案，使其显示我想要的文本，但标签未对齐！不知道这个问题还有什么需要写的！

############################ GLOBAL #########################################

#1. App
if("shiny" %in% rownames(installed.packages()) == FALSE){ install.packages("shiny") }
library(shiny)

#2. Easier data handling
if("dplyr" %in% rownames(installed.packages()) == FALSE){ install.packages("dplyr") }
library(dplyr)

#3. Interactive graphs
if("plotly" %in% rownames(installed.packages()) == FALSE){ install.packages("plotly") }
library(plotly)


############################ UI #########################################
ui <- fluidPage( 
  # Set bullet size
  tags$style(type='text/css', "#select {font-size: 16px !important} "), 
  # 32px - h1() size || 24px - h2() size || 18.72px - h3() size || 16px - h4() size || 13.28px - h5() size
  navbarPage("Analysis", 
             tabPanel("Home",
                      sidebarPanel(

                        h5(tags$li(textOutput("patent_scape_tag1")))
             ),
             mainPanel(
               plotlyOutput("treemap")
               )
             )
  ))


############################ SERVER #########################################

server <- function(input, output, session) { 
  dtd1 <- NULL
  output$treemap <- renderPlotly({ 
    dtd1 <<- structure(list(V1 = structure(c(9L, 8L, 4L, 7L, 2L, 6L, 1L, 3L, 
                                            5L, 10L, 13L, 11L, 12L), .Label = c("Apple", "Avocado", "Banana", 
                                                                                "Carrot", "Mango", "Mushroom", "Onion", "Orange", "Pineapple", 
                                                                                "Strawberry", "Sweet-lemon", "Watermelon", "Wildberry"), class = "factor"), 
                           V2 = structure(c(4L, 3L, 9L, 11L, 12L, 2L, 1L, 6L, 10L, 5L, 
                                            7L, 8L, 1L), .Label = c("23", "24", "36", "42", "43", "46", 
                                                                    "48", "52", "56", "61", "82", "94"), class = "factor")), class = "data.frame", row.names = c(NA, 
                                                                                                                                                                 -13L))
    p <- plot_ly(
      dtd1,
      labels = ~ V1,
      parents = NA,
      values = ~ V2,
      type = 'treemap',
      hovertemplate = "Ingredient: %{label}<br>Count: %{value}<extra></extra>"
    )

    p
  })

  output$patent_scape_tag1 <- renderText({ 
    paste0("Topic ",
           as.character(dtd1$V1[which.max(dtd1$V2)]), 
           " reached the highest number!")
  })
} 

shinyApp(ui, server)

【问题讨论】：

为什么要把tags$head 放在tags$li 里面？这很奇怪。 tags$head 应该在 fluidPage 的开头。也就是说，你在说哪个标签？什么是错位？
tag$li 是我想要的。对于未对齐，我指的是它在下面显示标签和文本，而不是在它旁边。我真的不太了解这种编码，我正在关注我提到的问题！但是，还是去掉了那么多标签，就这样留下了：h5(tags$li(textOutput("patent_scape_tag1")))，但仍然没有在同一行给我。
也许你想要h5(tags$li(textOutput("patent_scape_tag1", inline=TRUE)))？但我不确定你为什么有一个li。您是否正在尝试创建某种列表？
@MrFlick 是的，确实，我在sidebarPanel 中显示多个这些标签作为 5 或 6 个列表。这解决了我的问题！

标签： css r shiny shinyapps

【解决方案1】：

这是你想要的吗？

ui <- fluidPage( 

  tags$head(
    tags$style(HTML("#patent_scape_tag1 {display: list-item;}"))
  ),

  navbarPage("Analysis", 
             tabPanel("Home",
                      sidebarPanel(
                        textOutput("patent_scape_tag1")
                      ),
                      mainPanel(
                        plotlyOutput("treemap")
                      )
             )
  )
)

【讨论】：