どのようにして列内の罫線を含むすべてのコンテンツを垂直に整列できますか？

Question

参考のためにcodepenを参照してください：。。http://codepen.io/rezasan/pen/apvMOR

私もセパレータが垂直に配向されるように表示テーブルを試みたが、動作しない列（日付、タイトルやボタンですべてのコンテンツを作成しようとしているいくつかを要求ここでは専門家からの支援

HTML：。

<ul class="ir_home_news">     
     <li class="si_fixed"> 
      <div class="ir_home_newsDate">18 November 2016</div> 
      <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
      <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> 
     </li> 
     <li class="si_fixed"> 
      <div class="ir_home_newsDate">18 November 2016</div> 
      <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
      <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> 
     </li> 
     <li class="si_fixed"> 
      <div class="ir_home_newsDate">18 November 2016</div> 
      <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
      <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> 
     </li> 
    </ul> 

CSS：

ul,li{ 
     margin:0; 
     padding:0 
    } 

    li{ 
     list-style-type:none; 
    } 
    .ir_home_news li{ 
     border-top:1px solid #ebebeb; 
     padding: 10px; 
    } 

    .ir_home_news li:nth-child(even){ 
     background-color: #f8f8f8; 
    } 

    .ir_home_news li::after { 
     content: ""; 
     clear: both; 
     display: table; 
    } 

    .ir_home_news li div{ 
     display: table-cell; 
     vertical-align: middle; 
     padding: 0px 15px; 
     border-right: 1px solid red; 
    } 

    .ir_home_news li div:last-child{ 
     border-right: none; 
    } 

    .ir_home_newsDate { 
     float: left; 
     width: 18%; 
     margin-bottom: 10px; 
     font-size: 18px; 
     color:#003087; 
    } 

    .ir_home_newsTitle{ 
     float: left; 
     width: 65%; 
     font-size: 17px; 
     color:#003087; 
    } 

    .ir_home_button{ 
     float: left; 
     width: 10%; 
    } 
    .ir_home_button button{ 

     background-color: #003087; 
     color: #fff; 
     padding: 15px 25px; 
     border-radius: 0; 
     font-size: 13px; 
    } 

ul, 
 
    li { 
 
     margin: 0; 
 
     padding: 0 
 
    } 
 
    
 
    li { 
 
     list-style-type: none; 
 
    } 
 
    
 
    .ir_home_news li { 
 
     border-top: 1px solid #ebebeb; 
 
     padding: 10px; 
 
    } 
 
    
 
    .ir_home_news li:nth-child(even) { 
 
     background-color: #f8f8f8; 
 
    } 
 
    
 
    .ir_home_news li::after { 
 
     content: ""; 
 
     clear: both; 
 
     display: table; 
 
    } 
 
    
 
    .ir_home_news li div { 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
     padding: 0px 15px; 
 
     border-right: 1px solid red; 
 
    } 
 
    
 
    .ir_home_news li div:last-child { 
 
     border-right: none; 
 
    } 
 
    
 
    .ir_home_newsDate { 
 
     float: left; 
 
     width: 18%; 
 
     margin-bottom: 10px; 
 
     font-size: 18px; 
 
     color: #003087; 
 
    } 
 
    
 
    .ir_home_newsTitle { 
 
     float: left; 
 
     width: 65%; 
 
     font-size: 17px; 
 
     color: #003087; 
 
    } 
 
    
 
    .ir_home_button { 
 
     float: left; 
 
     width: 10%; 
 
    } 
 
    
 
    .ir_home_button button { 
 
     background-color: #003087; 
 
     color: #fff; 
 
     padding: 15px 25px; 
 
     border-radius: 0; 
 
     font-size: 13px; 
 
    }

<ul class="ir_home_news">     
 
      <li class="si_fixed"> 
 
       <div class="ir_home_newsDate">18 November 2016</div> 
 
       <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
 
       <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> 
 
      </li> 
 
      <li class="si_fixed"> 
 
       <div class="ir_home_newsDate">18 November 2016</div> 
 
       <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
 
       <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> 
 
      </li> 
 
      <li class="si_fixed"> 
 
       <div class="ir_home_newsDate">18 November 2016</div> 
 
       <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
 
       <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> 
 
      </li> 
 
     </ul>

Answer 1

があなたの李内floar: leftを使用していない、それはあなたの垂直揃えいいえ、私はちょうどあなたの内のすべてのfloat: leftを削除し、

ul, 
 
    li { 
 
     margin: 0; 
 
     padding: 0 
 
    } 
 
    
 
    li { 
 
     list-style-type: none; 
 
    } 
 
    
 
    .ir_home_news li { 
 
     border-top: 1px solid #ebebeb; 
 
     padding: 10px; 
 
    } 
 
    
 
    .ir_home_news li:nth-child(even) { 
 
     background-color: #f8f8f8; 
 
    } 
 
    
 
    .ir_home_news li::after { 
 
     content: ""; 
 
     clear: both; 
 
     display: table; 
 
    } 
 
    
 
    .ir_home_news li div { 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
     padding: 0px 15px; 
 
     border-right: 1px solid red; 
 
    } 
 
    
 
    .ir_home_news li div:last-child { 
 
     border-right: none; 
 
    } 
 
    
 
    .ir_home_newsDate { 
 
     width: 18%; 
 
     margin-bottom: 10px; 
 
     font-size: 18px; 
 
     color: #003087; 
 
    } 
 
    
 
    .ir_home_newsTitle { 
 
     width: 65%; 
 
     font-size: 17px; 
 
     color: #003087; 
 
    } 
 
    
 
    .ir_home_button { 
 
     width: 10%; 
 
    } 
 
    
 
    .ir_home_button button { 
 
     background-color: #003087; 
 
     color: #fff; 
 
     padding: 15px 25px; 
 
     border-radius: 0; 
 
     font-size: 13px; 
 
    }

<ul class="ir_home_news"> 
 
     <li class="si_fixed"> 
 
      <div class="ir_home_newsDate">18 November 2016</div> 
 
      <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
 
      <div class="ir_home_button"> 
 
       <a href=""> 
 
        <button>VIEW DETAILS</button> 
 
       </a> 
 
      </div> 
 
     </li> 
 
     <li class="si_fixed"> 
 
      <div class="ir_home_newsDate">18 November 2016</div> 
 
      <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
 
      <div class="ir_home_button"> 
 
       <a href=""> 
 
        <button>VIEW DETAILS</button> 
 
       </a> 
 
      </div> 
 
     </li> 
 
     <li class="si_fixed"> 
 
      <div class="ir_home_newsDate">18 November 2016</div> 
 
      <div class="ir_home_newsTitle">Disclosure Of Interest</div> 
 
      <div class="ir_home_button"> 
 
       <a href=""> 
 
        <button>VIEW DETAILS</button> 
 
       </a> 
 
      </div> 
 
     </li> 
 
    </ul>

を働いたの原因となりますリ

.ir_home_newsDate { 
    width: 18%; 
    margin-bottom: 10px; 
    font-size: 18px; 
    color: #003087; 
} 

.ir_home_newsTitle { 
    width: 65%; 
    font-size: 17px; 
    color: #003087; 
} 

.ir_home_button { 
    width: 10%; 
}