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

あなたが欲しいしかし、見ている擬似要素のスタイルを設定することができます - あなたはそれをストレッチしたい場合は代わりに、文字の境界線や背景を使用します。