CSS：在DIV中对齐元素

Question

我无法正确对齐div中的某些元素。

这是我到目前为止所拥有的。我希望我的Bootstrap滑块垂直对齐，以便幻灯片的底部与右侧黄色输入文本的底部相匹配。

这是我的CSS：

.filter {
    display: inline;
    clear: both !important;
}

.filter h1 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: 20px !important;
    font-size: 18px !important;
    font-weight: normal !important;
    clear:both;
}

.filter_slider {
    width:300px !important;
    float: left !important;
    vertical-align: bottom !important;
}

.filter_text {
    background: #ffffcc !important;
    width: 80px !important;
    float: right !important;
    vertical-align: middle !important;
}

这是我的HTML：

    <div class="filter">
        <h1>Price</h1>
        <input id="filter_slider_price" class="filter_slider" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
        <input type="text" id="filter_text_price" class="filter_text" readonly>

        <script type="text/javascript">
          $('#filter_slider_price').slider().on('slide', function(ev) { $('#filter_text_price').val(ev.value); });
        </script>
    </div>

    <div class="filter">
        <h1>Volume</h1>
        <input id="filter_slider_volume" class="filter_slider" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
        <input type="text" id="filter_text_volume" class="filter_text" readonly>

        <script type="text/javascript">
          $('#filter_slider_volume').slider().on('slide', function(ev) { $('#filter_text_volume').val(ev.value); });
        </script>
    </div>

Answer 1

以下是解决方案的示例：http://jsfiddle.net/Paceaux/Dv3r3/

我假设了以下语义HTML，包括HTML5 range属性和<ouptut>元素：

<form class="form_filter">
<fieldset class="filter">
  <label for="range1" class="filter_label">price</label>
  <input type="range" id="range1" class="filter_slider"/>
  <output class="filter_text">
    10
  </output>

我可以使用position:relative上的.filter_label和.filter_text上的一些填充诡计来获得类似于屏幕截图的理想结果。

因为我没有使用!important的任何上下文，所以我从CSS中删除了它：

.form_filter{
  width: 420px;
}
.filter {
  display: block;
}
.filter_label {
  display: block;
  margin-bottom: 0;
  margin-top: 60px;
  line-height: 20px;
  font-size: 18px;
  font-weight: normal;
}
.filter_slider {
  width:300px;
}
.filter_text {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  top:-55px;
  float:right;
  padding-top:40px;
  height: 30px;
  width: 80px;
  background: #ffffcc;
}