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

放一个＆lt; DIV＆GT;标记要显示垂直线的位置并使用下面提到的CSS

.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: "|"; }

当然，您可以根据需要设置伪元素的样式 - 如果您想要拉伸，请使用边框或背景而不是字符。

如何在div中设置垂直和水平条？

2 个答案: