並排div使用內聯塊不工作

我使用的廣播滑塊如下所示：Radio Slider。我想提出一個下拉列表右側的滑塊，這我使用display:inline-block這樣做：並排div使用內聯塊不工作

<div class="wrapper toggle_radio" style="background: #497dd0; display:inline-block;"> 
     <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option"> 
     <input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option"> 
     <input type="radio" class="toggle_option" id="third_toggle" name="toggle_option"> 
     <label for="first_toggle"><p>All</p></label> 
     <label for="second_toggle"><p>Month</p></label> 
     <label for="third_toggle"><p>Quarter</p></label> 
     <div class="toggle_option_slider"> </div> 
    </div> 

    <!-- Right side dropdown -->  
    <div class="pull right" style=" margin-left: 100px;, margin-top: 0px; display:inline-block;"> 
     <select placeholder="Category" ng-model="selectedCategory" class="md-dark" style="min-width: 100px;"> 
     <option ng-value="category" ng-repeat="category in categories">{{category | capitalize}}</option> 
     </select> 
    </div>

然而，它沒有正確對齊（它們是在不同的垂直位置）：

有沒有快速解決這個問題？

來源

2015-11-23 Saurabh Verma

您使用的是Twitter Bootstrap嗎？ –

@AbhashUpadhyaya在他的例子中沒有引導類。 –

不，我正在使用角材料 –

把它放在一個表像這樣：http://paste.ofcode.org/UuSqnBTuBtKBi3SqgSKiSU

應該很好地工作，但你可能需要做一些小的調整（如增加TD的大小，例如），因爲我已經沒有測試自己的代碼。告訴我它是怎麼回事，如果你需要任何幫助。

編輯：代碼被搞亂，以便粘貼它粘貼代碼，而不是

來源

2015-11-23 13:18:01

檢查：元素浮動與否。確保它們的總高度（行高，填充和邊距）相等。使用： vertical-align：middle;

如果您使用浮動，垂直對齊將不會對浮動元素有任何影響。如顯示：如果您是浮動元素，則內聯塊無用。

<!-- Right side dropdown -->  
<div class="pull right" style=" margin-left: 100px;, margin-top: 0px;

在margin-left後移除逗號：100px;

不使用浮動的小例子。

<style> 
    .row{ 
     position:relative; 
     display:block; 
    } 
    .column{ 
     display:inline-block; 
     width:49%; 
    } 
</style> 

<div class="row"> 
    <div class="column">this is left column</div> 
    <div class="column">this is right column</div> 
</div>

來源

2015-11-23 13:21:55 vssadineni

並排div使用內聯塊不工作

回答

相關問題