Проблема форматирования блестящих столбцов

Question

Я пытаюсь выровнять actionButton по горизонтали с полем textInput.

Поскольку actionButton «next_question» и «правильное» поле textInput находятся в одной и той же жидкости. Я думал, что они будут выровнены по горизонтали. Это не так.

Кроме того, я подумал, что выбор более высокого номера столбца для поля «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

Решение состоит в том, чтобы добавить небольшой CSS к display:inline-block.

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