如何在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: "|"; } 

当然你也可以风格，伪元素，但是你想一下 - 如果你想让它伸展使用边框或背景，而不是一个字符。