将逐字文本输出与 Fluidrow 中的文本输入对齐

Question

我试图在从另一个选项卡输入的一些输出字段旁边显示一些输入字段。然而，输出字段正在下方，无法与其余字段对齐。

代码如下：

fluidRow(
  column(3, sliderInput(inputId = "avg_planned_miles", label = "Average Planner Miles", min = 5, max = 50, value = 9, step = 0.1)),
  column(3, textInput(inputId = "batch_pct", label = "Batch %", value = "0.5")),
  column(3, h4("Volume: "), verbatimTextOutput(outputId = "planner_volume"))
)

Answer 1

尝试这个代码，它对我来说看起来更好

fluidRow(
  column(3,
         tagList(
           tags$style(type = 'text/css','#avg_planned_miles .irs-grid-text {font-size: 12px}'), #the grid numbers size
           div(id = 'avg_planned_miles', style='font-size: 16px;', #label font size
               sliderInput(inputId = "avg_planned_miles", label = "Average Planner Miles\n", min = 5, max = 50, value = 9, step = 0.1)
           )#div
         )#tags
  ),
  column(3,
         tagList(
           div(id = 'batch_pct',
               style='position:absolute; top:10px; right:5px;', #add margin space 
               textInput(inputId = "batch_pct", width = 280,
                         label = "Batch%", value = "0.5")
           )
         )
  ),
  column(3, p(strong("Volume")), #bold font to match the other fields
         verbatimTextOutput(outputId = "planner_volume", placeholder = 1)
  ),
)

您可以将 sliderInput 保留在代码中，我认为如果字体大小更大，看起来会更好。