如何在rMarkdown flexdashboard中水平对齐输入元素

Question

它们默认显示在彼此之下

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
runtime: shiny    
---

```{r input}

numericInput(inputId="a",label=NULL,value = 5,min = 1,max = 15)

selectInput(inputId="b",label=NULL,c("x","y","z"))


```

Answer 1

选项1：

将元素包装在ID为myGroup的附加div容器中，并将CSS样式添加到各个子元素中：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
runtime: shiny    
---

<style>
#myGroup > div {
  width: 45% !important;
  float: left !important;
  margin: 10px !important;
}
</style>

```{r input}
div(numericInput(inputId="a",label=NULL,value = 5,min = 1,max = 15),
selectInput(inputId="b",label=NULL,c("x","y","z")), id='myGroup')
```

选项2：

另一种选择是使用jQuery向元素添加单个类：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
runtime: shiny    
---

<style>
.myClass {
  width: 45% !important;
  float: left !important;
  margin: 10px !important;
}
</style>

```{r input}
numericInput(inputId="a",label=NULL,value = 5,min = 1,max = 15)
selectInput(inputId="b",label=NULL,c("x","y","z"))
```

<script type="text/javascript">
  $(document).ready(function() {
    $('.form-group').addClass('myClass');
  });
</script>

每个input元素都包含在一个带有类form-group的div容器中。我们选择这些div容器并将类myClass添加到它们中，我们已经在上面定义了它。

（部分$(document).ready(function() { ... });仅表示在文档完全加载时应执行...。）