Question

我正在尝试将actionButton与textInput字段水平对齐。

由于“ next_question” actionButton和“正确” textInput字段位于同一fluidRow中，所以我认为它们将水平对齐。他们不是。

此外，我认为为“ yup”框选择更高的列号会将其向右移动。同样，情况并非如此。

我想念什么？

library(shiny)

shinyApp(
  ui = fluidPage(

    sidebarLayout(
      sidebarPanel(

        textInput("answer", width = "50px", label = "Answer"),

        fluidRow(  
          column(2, actionButton(inputId = "next_question", label = "Next")),
          column(8, textInput(inputId = "correct", width = 30, label = "yup"))
        )
      ),

      mainPanel(
        # Equation
        textOutput("equation")
      ))),

  server = function(input, output, session){}
)

Answer 1

解决方案是在display:inline-block中添加一个小的CSS。

library(shiny)

shinyApp(
  ui = fluidPage(

    sidebarLayout(
      sidebarPanel(

        textInput("answer", width = "50px", label = "Answer"),

        fluidRow(  


                 actionButton(inputId = "next_question", label = "Next"),
                 tags$div(textInput(inputId = "correct", label = "yup"), style = "display:inline-block")

        )
      ),

      mainPanel(
        # Equation
        textOutput("equation")
      ))),

  server = function(input, output, session){}
)

参考：https://www.w3schools.com/Css/tryit.asp?filename=trycss_inline-block_nav

闪亮的列格式问题

1 个答案: