html - 尝试在标题元素之间添加一行分隔线

Question

我试图在这些下拉列表、标签和按钮之间建立一条线。在这张照片中:

我想要一行像这样将它们分开:

这是我尝试使用的 div 来实现这一行:

      <div style="float: left; border-right: 1px solid black; height: 100%;"></div>

这是第一张图片的代码:

       <section class="featured">
        <div id="HomeScreenHeader" runat="server" class="content-wrapper-header"> 
        <div id="HomeScreenActionButton">
            <div onclick="window.onbeforeunload = false;">
                <div style="float:right; margin-right:2px; margin-top:15px;">
                 <asp:Button ID="btnValidateTotals" runat="server" OnClick="btnValidateTotals_Click" style="line-height:12px;"  CssClass="statusbutton"/>
                 </div>
                <div style="float:right; margin-right:2px; margin-top:15px;">

                <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return window.confirm('Are you sure you want to leave? Any unsaved changes will be lost.');" OnClick="btnCancel_Click" style="line-height:10px; " CssClass="statusbutton" />
                </div>
                </div>
            </div>
        <div id="HomeScreenBranch" class="branch">
            <div style="margin-left:auto; margin-right:auto; text-align: center;"><asp:Label ID="lblHSBranch" runat="server" Text="<u>Branch</u>"></asp:Label></div>
            <asp:DropDownList ID="ddlHSBranch" runat="server" Width ="180" ></asp:DropDownList> 

        </div>  

        <div class="bank">

            <div style="margin-left:auto; margin-right:auto; text-align: center;"><asp:Label ID="lblHSBank" runat="server" Text="<u>Bank</u>"></asp:Label></div>
            <asp:DropDownList ID="ddlHSBank"  runat="server" AutoPostBack="true" Width ="180" OnSelectedIndexChanged="ddlHSBank_SelectedIndexChanged"></asp:DropDownList> 
            </div>     
        <div class="teller"> 
                <asp:Label ID="lblteller" runat="server" Text="Teller:"></asp:Label>
            </div> 
            </div>
</section>

求助!谢谢!

添加了 CSS:

  .branch {
  float:right; 
  width:180px; 
  height: 28px; 
  font-size: 1.2em;
  color: #FFF;
  margin-right:10px;
  margin-bottom:50px;
  }

   .bank {
    float:right; 
    width:180px; 
    height: 29px;  
    margin-right:10px;
   font-size: 1.2em;
    color: #FFF;
   margin-bottom:10px;
   }
 .teller{
    float:left; 
    width:120px; 
    height: 100px; 
    margin-left:10px;
    margin-right:10px;
    font-size: 1.2em;
color: #FFF;
    }

Answer 1

对每个 div 使用一些 style="border-left: solid 1px #000; 可能会起作用。