CSS：對齊DIV中的元素

我無法正確對齊div中的某些元素。CSS：對齊DIV中的元素

enter image description here

這是我到目前爲止所。我希望我的引導滑塊垂直對齊，以便滑塊的底部與右側黃色輸入文本的底部相匹配。

這是我的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>

來源

2013-12-12 The Nomad

你能還提供了您所使用的HTML樣本：

因爲我沒有使用任何!important背景下，我從CSS去掉呢？這對確定合適的CSS可能會有幫助。 – paceaux

爲OP添加了html。此外，尋找將輸入文本字段推到滑塊旁邊。試圖漂浮在兩個但沒有工作。 –

你爲什麼擁有重要的一切？這是非常糟糕的做法，因爲它們不能被後來的類無視級聯樣式表的目的而被覆蓋。此外，容器浮動的事實意味着它們不在流動中，並且您將難以垂直定位它們。查找顯示：內聯塊 – Aaron

這裏有一個解決方案的示例：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>

我可以通過使用.filter_label上的position:relative以及.filter_text上的一些填充shenanigans，獲得類似於截圖的理想結果。

.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; 
}

來源

2013-12-12 21:53:10 paceaux

CSS：對齊DIV中的元素

回答

相關問題