Question

我正在尝试将此UI元素对齐到此行的底部。我有点疯狂的垂直对齐，但它没有用。这个HTML是用闪亮的方式生成的，但如果你不知道有光泽，只要告诉我把它放在哪里，我就可以找出把它放在闪亮的地方。这是我的闪亮代码，它生成了图像中的大部分代码，但是我在手动后手动输入“vertical-align”（没有结果）。如果要测试，应该很容易为变量提供子常量。

output$Y2AxisUI <- renderUI({
startMin <- round(as.numeric(DXMinMaxSubset()[1, 1])) - 1
startMax <- round(as.numeric(DXMinMaxSubset()[2, 1])) + 1
isolate({startPremium <- as.numeric(DXDataSubset()[1, 'premium'][[1]])})
finalMin <- min(startMin, startPremium + (startPremium - startMax), na.rm = TRUE) %>%
            round(2)
finalMax <- max(startMax, startPremium + (startPremium - startMin), na.rm = TRUE) %>%
            round(2)
fluidRow(
    column(1,
      numericInput("Y2MinNumInputBox",
                    label = NULL,
                    value = startMin)
    ),
  column(3,
    sliderInput("Y2AxisSlider",
                label = h4("Y2 axis range"),
                min = finalMin,
                max = finalMax,
                value = c(startMin,startMax),
                width = "100%")
  ),
  column(1,
   numericInput("Y2MaxNumInputBox",
         label = NULL,
         value = startMax)
  ),
  style = "padding-left: 40px")
})

编辑以按要求显示实际的HTML代码

<div class="row" style="padding-left: 40px">
  <div class="col-sm-1">
    <div class="form-group shiny-input-container">
      <input id="Y2MinNumInputBox" type="number" class="form-control shiny-bound-input" value="0">
    </div>
  </div>
  <div class="col-sm-3">
    <div class="form-group shiny-input-container" style="width: 100%;">
      <label class="control-label" for="Y2AxisSlider">
        <h4>Y2 axis range</h4>
      </label>
      <span class="irs js-irs-0 irs-with-grid"><span class="irs"><span class="irs-line" tabindex="-1"><span class="irs-line-left">

0 532.29 0 311 0 - 311 0 55 110 165 220 275 330 385 440 495 532.29

编辑以显示生成的闪亮代码，部分归功于benjarwar的回答

fluidRow(
      column(12,
        div(id = "left",
            style = "display: inline-block; vertical-align: bottom; width: 100px",
            numericInput("Y2MinNumInputBox",
                            label = NULL,
                            value = startMin)
        ),
        div(id = "center",
            style = "display: inline-block; vertical-align: bottom; padding-right: 40px; padding-left: 40px; width: 400px;",
            sliderInput("Y2AxisSlider",
                        label = h4("Y2 axis range"),
                        min = finalMin,
                        max = finalMax,
                        value = c(startMin,startMax),
                        width = "100%")
        ),
        div(id = "right",
            style = "display: inline-block; vertical-align: bottom; width: 100px",
            numericInput("Y2MaxNumInputBox",
                         label = NULL,
                         value = startMax)
        )
      ),
      style = "padding-left: 40px")

Answer 1

看起来你正试图将浮动div的内容对齐。这里的第一个问题是div在高度上是独立的。所以只是因为你的中间div更高，因为它和最左边的div都是浮动的，设置垂直对齐不会有任何影响。

尝试将所有三个div的样式更改为display: inline-block。一旦它们是内联元素，那么垂直对齐底部就可以了。

HTML：

<div id="left">Left div</div>
<div id="middle">Middle div</div>
<div id="right">Right div</div>

CSS：

div {
  display: inline-block;
  vertical-align: bottom;
}

#middle {
  height: 200px;
  background: #fcc;
}

小提琴：http://jsfiddle.net/35g59k5y/

对齐元素在行的底部

1 个答案: