调整闪亮控件的标签位置

令我惊讶的是，StackOverflow 上以前没有出现过这个问题，但无论如何，问题是：

目前，标签文本“年龄范围”在此处指定

sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1)

...默认情况下显示在顶部。

如何控制标签的位置，具体来说，如何将标签放置在实际滑块的左侧？

我是否需要从函数中删除“年龄范围”参数，然后使用 HTML？有没有什么方法可以深入了解这一切背后的引导程序？

请注意，我不是 CSS 的导出者，因此很可能有更好的解决方案。闪亮（v0.11.1）中的输入功能simply返回 HTML；在您的示例中，返回值为：

sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1)
<div class="form-group shiny-input-container">
<label class="control-label" for="age">Age Range</label>
<input class="js-range-slider" id="age" data-type="double" data-min="32" data-max="99" data-from="32" data-to="99" data-step="1" data-grid="true" data-grid-num="9.57142857142857" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="1.49253731343284"/>
</div>

所以你必须调整label元素相对于input元素。为此，我将这些元素包装在一个新的div能够分配一个id。然后你可以修改布局label and input在该 id 内：

div(id = "myDiv", sliderInput(inputId="age", "Age Range", min=32, max=99, value=c(32, 99), step=1))
<div id="myDiv">
...
</div> 

为了进行修改，我将以下内容添加到页面功能 (e.g. fluidPage) 作为参数：

tags$head(tags$style(HTML("div#myDiv label { width: 20%; }
                           div#myDiv input { display: inline-block; width: 80%;}")))

在此设置中，标签获得行宽的 20%，输入元素获得 80。display: inline-block;需要这样标签和输入将在同一行。我认为这是调整标签相对于其输入元素的位置的一种解决方案。