Как я могу вертикально выровнять все содержимое, включая границы в столбцах?

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 внутри ли, это заставит ваш вертикальной не совпадет не работал,

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>

Я просто удалить все float: left внутри вашей li

.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%; 
}