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

如果我从 View 中取出 CSS 栏，它会很好地垂直对齐。带有条形图，如图所示。我想知道如何使用包含该栏的 div 来完成此操作？我尝试在该 div 中设置最大宽度，但这没有用。

有什么建议吗？谢谢。

回复:复选框

页面源

<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属性(property)。您可以像这样使用它:

.example {
  display: inline-block;
}