我有一個有四行的R Shiny應用程式。第一行和第三行由selectInput下拉框組成，而第二行和第四行由文本輸出組成。
該應用程式看起來像這樣：
我想消除第一行和第二行之間的空間（margin-bottom），同時保持應用程式中所有其他距離不變。明確地說，這意味著在解決方案之后，第三行和第四行之間的空間應該仍然存在。
以下是渲染應用程式的代碼：
ui <- shiny::/span>navbarPage()
shiny::tabPanel(title = "My Tab",
值 = "my-tab"，
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }")，
shiny::absolutePanel(id = "panel1",
class = "ap",/span>
固定 = TRUE,
draggable = FALSE,
top = 366，
左 = 55，
右 = "auto",
底部 = "auto",
寬度 = 1074，
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn. btn-default.active { background-color: white; }"），
shiny::fluidRow()
shiny::column(width = 2,
shiny::selectInput(inputId = "c1"/span>,
標簽 = "Condition 1",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Fair"，
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c2"/span>,
標簽 = "Condition 2",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c3",
標簽 = "Condition 3",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c4"/span>,
標簽 = "Condition 4",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c5",
標簽 = "Condition 5",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c6",
標簽 = "Condition 6",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）
)
)，
shiny::fluidRow()
shiny::column(width = 2,
htmltools:: p(id = "condition-words-1">。 "條件詞1"））,
shiny::column(width = 2,
htmltools:: p(id = "condition-words-2">。 "條件詞2"））,
shiny::column(width = 2,
htmltools:: p(id = "condition-words-3">。 "條件詞3"））,
shiny::column(width = 2,
htmltools:: p(id = "condition-words-4">。 "條件詞4"))，
shiny::column(width = 2,
htmltools:: p(id = "condition-words-5">。 "條件詞5"))，
shiny::column(width = 2,
htmltools:: p(id = "condition-words-6">。 "條件詞6"))
)，
shiny::fluidRow()
shiny::column(width = 2,
shiny::selectInput(inputId = "i1"/span>,
標簽 = "Item 1",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Fair"，
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i2"/span>,
標簽 = "Item 2",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i3",
標簽 = "Item 3",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i4"/span>,
標簽 = "Item 4",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i5",
標簽 = "Item 5",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i6",
標簽 = "Item 6",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）
)
)，
shiny::fluidRow()
shiny::column(width = 2,
htmltools:: p(id = " item-words-1"。 "Item words 1"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-2", "Item words 2"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-3"。 "Item words 3"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-4"。 "Item words 4"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-5", "Item words 5"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-6", "Item words 6"))
)
) # ** 結束絕對面板 ** #
) # ** 結束 Tab ** #
) # ** END UI function ** #
server < - function(input,output。 會話） { }
shinyApp(ui, server)
我已經使用谷歌鉻礦檢查工具，試圖實施CSS來解決這個問題，但我似乎無法弄清楚。
非常感謝您的幫助！
uj5u.com熱心網友回復：
你的方向是正確的-- margin-bottom / margin-top 做到了你想要的效果：
ui <- shiny::/span>navbarPage()
shiny::tabPanel(title = "My Tab",
值 = "my-tab",
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }")，
shiny::absolutePanel(id = "panel1",
class = "ap",/span>
固定 = TRUE,
draggable = FALSE,
top = 366，
左 = 55，
右 = "auto",
底部 = "auto",
寬度 = 1074，
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn. btn-default.active { background-color: white; }"），
shiny::fluidRow()
shiny::column(width = 2,
shiny::selectInput(inputId = "c1"/span>,
標簽 = "Condition 1",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Fair"，
寬度 = "130px"）,
style = "margin-bottom:-15px;"
）,
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c2"/span>,
標簽 = "Condition 2",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
style = "margin-bottom:-15px;"
）,
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c3",
標簽 = "Condition 3",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
style = "margin-bottom:-15px;"
）,
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c4",
標簽 = "Condition 4",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
style = "margin-bottom:-15px;"
）,
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c5",
標簽 = "Condition 5",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
style = "margin-bottom:-15px;"
）,
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c6",
標簽 = "Condition 6",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
style = "margin-bottom:-15px;"
)
)，
shiny::fluidRow()
shiny::column(width = 2,
htmltools:: p(id = "condition-words-1">。 "條件詞1"））,
shiny::column(width = 2,
htmltools:: p(id = "condition-words-2">。 "條件詞2"））,
shiny::column(width = 2,
htmltools:: p(id = "condition-words-3">。 "條件詞3"））,
shiny::column(width = 2,
htmltools:: p(id = "condition-words-4">。 "條件詞4"))，
shiny::column(width = 2,
htmltools:: p(id = "condition-words-5">。 "條件詞5"))，
shiny::column(width = 2,
htmltools:: p(id = "condition-words-6">。 "條件詞6"))
)，
shiny::fluidRow()
shiny::column(width = 2,
shiny::selectInput(inputId = "i1"/span>,
標簽 = "Item 1",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Fair"，
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i2"/span>,
標簽 = "Item 2",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i3",
標簽 = "Item 3",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i4"/span>,
標簽 = "Item 4",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i5",
標簽 = "Item 5",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i6",
標簽 = "Item 6",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）
)
)，
shiny::fluidRow()
shiny::column(width = 2,
htmltools:: p(id = " item-words-1"。 "Item words 1"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-2", "Item words 2"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-3"。 "Item words 3"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-4"。 "Item words 4"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-5", "Item words 5"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-6", "Item words 6"))
)
) # ** 結束絕對面板 ** #
) # ** 結束 Tab ** #
) # ** END UI function ** #
server < - function(input,output。 會話） { }
shinyApp(ui, server)
使用margin-top：
library(shiny)
ui <- shiny::navbarPage()
shiny::tabPanel(title = "My Tab",
值 = "my-tab"，
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap { padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; }")，
shiny::absolutePanel(id = "panel1",
class = "ap",/span>
固定 = TRUE,
draggable = FALSE,
top = 366，
左 = 55，
右 = "auto",
底部 = "auto",
寬度 = 1074，
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn. btn-default.active { background-color: white; }"），
shiny::fluidRow()
shiny::column(width = 2,
shiny::selectInput(inputId = "c1"/span>,
標簽 = "Condition 1",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Fair"，
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c2"/span>,
標簽 = "Condition 2",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c3",
標簽 = "Condition 3",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c4"/span>,
標簽 = "Condition 4",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c5",
標簽 = "Condition 5",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "c6",
標簽 = "Condition 6",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）
)
)，
shiny::fluidRow()
shiny::column(width = 2,
htmltools:: p(id = "condition-words-1">。 "條件詞1"),
style = "margin-top:-15px;"）,
shiny::column(width = 2,/span>
htmltools:: p(id = "condition-words-2">。 "條件詞2"),
style = "margin-top:-15px;"）,
shiny::column(width = 2,/span>
htmltools:: p(id = "condition-words-3">。 "條件詞3"),
style = "margin-top:-15px;"）,
shiny::column(width = 2,/span>
htmltools:: p(id = "condition-words-4">。 "條件詞4"),
style = "margin-top:-15px;"）,
shiny::column(width = 2,/span>
htmltools:: p(id = "condition-words-5">。 "condition-words 5"),
style = "margin-top:-15px;"）,
shiny::column(width = 2,/span>
htmltools:: p(id = "condition-words-6">。 "condition-words 6"),
style = "margin-top:-15px;"）
)，
shiny::fluidRow()
shiny::column(width = 2,
shiny::selectInput(inputId = "i1"/span>,
標簽 = "Item 1",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Fair"，
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i2"/span>,
標簽 = "Item 2",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i3",
標簽 = "Item 3",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i4"/span>,
標簽 = "Item 4",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i5",
標簽 = "Item 5",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）,
),
shiny::column(width = 2,/span>
shiny::selectInput(inputId = "i6",
標簽 = "Item 6",
選擇 = c("壞"。 "Fair","Good"）,
selected = "Good",
寬度 = "130px"）
)
)，
shiny::fluidRow()
shiny::column(width = 2,
htmltools:: p(id = " item-words-1"。 "Item words 1"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-2", "Item words 2"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-3"。 "Item words 3"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-4"。 "Item words 4"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-5", "Item words 5"))，
shiny::column(width = 2,
htmltools:: p(id = " item-words-6", "Item words 6"))
)
) # ** 結束絕對面板 ** #
) # ** 結束 Tab ** #
) # ** END UI function ** #
server < - function(input,output。 會話） { }
shinyApp(ui, server)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/321896.html
標籤：