如何在div中設置垂直和水平欄？

Question

我有一個下面的代碼，我必須設置垂直條。

反正有豎條放在div中嗎？

以下代碼適用於儀表板，所以我需要小的垂直線，以免顯得笨拙。

如何在div中設置垂直和水平欄？

<div class="box box-primary"> 
     <div class="box-header with-border"> 
      <h3 class="box-title">Work Anniversary</h3> 
      <div class="box-tools pull-right"> 
      <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> 
      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 
      </div> 
     </div><!-- /.box-header --> 
     <div class="box-body"> 
      <ul class="products-list product-list-in-box"> 


       <% date = Date.today %> 
      <% @employees = JoiningDetail.where("DATE_FORMAT(joining_date,'%d/%m') = ?", date.strftime('%d/%m'))%> 
      <% if @employees.empty? %> 

      <%else%> 
       <% @employees.each do |e| %> 
       <li class="item"> 
        <div class="product-img"> 
        <%unless e.nil? or e.nil? or e.employee.member.nil? or e.employee.member.avatar.nil? %> 
       <% if e.employee.gender == "Male" && e.employee.member.avatar_file_name == nil %> 
       <%= image_tag "avatar5.png",class: "img-circle", alt: "User Image", size: "25x25" %> 
        <% elsif e.employee.gender == "Female" && e.employee.member.avatar_file_name == nil %> 
        <%= image_tag "avatar2.png",class: "img-circle", alt: "User Image", size: "25x25" %> 
        <%else%> 
        <%= image_tag e.employee.member.avatar.url(:medium),class: "img-circle"%> 
        <%end%> <!-- if --> 
        <%end%> <!-- unless --> 
       </div> 
       <div class="product-info"> 
        <%= full_name(e.employee) %> 
       <div class="pull-right"> 
       <% @greeting = Greeting.where(sender_id: current_user.employee_id,date: Date.today,receiver_id: e.employee_id,greeting_type: "Anniversary") %> 
        <% if e.employee_id == current_user.employee_id %> 
         <small class="label label-success">Wish You A Very Happy Work Anniversary!</small> 
        <% else %> 
        <% if @greeting.empty? %> 
         <%= link_to 'Wish', anniversary_mail_greetings_path(emp_id: e.employee_id),class: 'btn btn-xs btn-primary',remote:true %> 
        <% else %> 
         <small class="label label-success">Message Sent</small> 
        <% end %> 
        <% end %> 
       </div> 
        <span class="users-list-date"><%= e.employee.department.try(:name) %></span> 
        </div> 

       <% end %> <!-- do --> 
      </li><!-- /.item --> 
      <%end%> <!-- if employee.empty? --> 
      </ul> 
     </div> 
     </div> 

Answer 1

將要顯示垂直線和使用下面提到的CSS < div>標籤

.verticalLine { 
    border-left: thick solid #ff0000; 
} 

<div class="verticalLine"> 
    keep your content here 
</div> 

Answer 2

有很多方法可以讓豎線在一個div，但你將不得不選擇下面的實現，這符合你最想要的。

邊境

如果你需要跨越的div的全高度的垂直線，你有沒有關於需要保證金的擔憂，一個CSS邊框可以做的伎倆。

border-left: 1px solid black; 

將在div的左側呈現黑色細線。

分隔符：僞元素

如果你正在尋找的div之間的垂直分隔符是需要自己的空間，高度，或其他樣式，考慮僞元素。無論您希望在哪個div中使用豎線，都可以使用純CSS在div內容之前或之後創建一個僞元素。

.div-class:after{ content: "|"; } 

當然你也可以風格，僞元素，但是你想一下 - 如果你想讓它伸展使用邊框或背景，而不是一個字符。