HTML/CSS如何水平對齊這些項目？

Question

在我看來，我想對齊水平以下（所以會有的複選框，然後在酒吧和休息都在同一行）：

筆者認爲：

<div class="tableHomework2"> 
      <%= link_to homework do %> 
       <div class="teachers linkable"> 
        <%= check_box_tag "homework[id][]", homework.id, checked = false, class: "narrowtr" %> 
        <div class="progress-meter-interest-mobile horizTranslate" data-bar-length=" <%= homework.average_interest * 100/5 %>%"><%= homework.average_interest %></div> 
        <font size="1"><%= homework.significance.sig_option %></font>&emsp;&ensp; 
        <font size="1"><strong><%= formatted_date(homework.due)%></strong></font> 
       </div> 
       <% end %> 
       <% end %> 
       <% end %> 

我在CSS的div：

.teachers { 
    border-bottom: 20px; 
    background-color: white; 
    top: 0px; 
    margin:0px; 
    padding: 0px 2px 2px 3px;  
    border-width: 2px; 
    border-bottom-width:1px; 
    border-bottom-color:Grey; 
    border-bottom-style: solid; 
    width: 100%; 
} 

.linkable{ 
    color: black 
} 

.progress-meter-interest-mobile{ 
    background-color: #FFD733; 
    width: 10px; 
    height: 20px; 
} 

.progress-meter-interest-mobile.horizTranslate { 
    -webkit-transition: 3s; 
    -moz-transition: 3s; 
    -ms-transition: 3s; 
    -o-transition: 3s; 
    transition: 3s; 
} 

如果我拿出從它垂直對齊很好的視圖中的CSS吧。條形圖顯示在圖像中。我想知道如何使用包含該欄的div來完成此操作？我試圖在該div中設置最大寬度，但這不起作用。

有什麼建議嗎？謝謝。

RE：複選框

頁源

<div class="show-for-small-only"> 
      <div class="tableHomework2"> 
      <a href="/homeworks/76"> 
       <div class="teachers linkable"> 
        <input type="checkbox" name="homework[id][]" id="homework_id_" value="76" class="narrowtr" /> 
        <div class="progress-meter-interest-mobile horizTranslate" data-bar-length=" 60%">3</div> 
        <font size="1">High</font>&emsp;&ensp; 
        <font size="1"><strong>25/11/2016</strong></font> 
       </div> 

Answer 1

我想你要找的是什麼display財產。您可以使用它像：

.example { 
    display: inline-block; 
} 

Answer 2

可以這樣實現：

.teachers .progress-meter-interest-mobile, .teachers input[type="checkbox"]{ 
    display:inline-block; 
    vertical-align:top 
}