试图在标题元素之间添加一行分隔

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;可能有效。

Answer 2

如何简化，我不是css master，但也许使用last-child伪选择器的想法可以帮到你。考虑低于ie9的浏览器不支持该选择器。但是您也可以为最后一个元素添加一个类以获得相同的效果： HTML

＆＃13;

＆＃13;

.wrapper div {

  float: left;

  padding: 5px;

  border-left: 1px solid black;

  border-top: 1px solid black;

  border-bottom: 1px solid black;

  height: 40px;

  text-align: center;

}

.wrapper div:last-child {

  border-right: 1px solid black;

}

input,

label {

  display: block;

}

＆＃13;

<div class="wrapper">
  <div>
    <label for="name">Teller</label>Some text</div>
  <div>
    <label for="name">Bank</label>
    <select>
      <option>Sample option</option>
    </select>
  </div>
  <div>
    <label for="name">Branch</label>
    <select>
      <option>Sample option</option>
    </select>
  </div>
  <div>
    <input type="button" value="cancel"></input>
  </div>
  <div>
    <input type="button" value="Validate"></input>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;