How can I vertically align all the content including borders in the columns?

Question

Please see codepen for reference: http://codepen.io/rezasan/pen/apvMOR

I'm trying to make all the contents in the columns (Date, Title and Button even the separator to be vertically aligned. Tried display table but doesn't work. Require some assistance from the experts here.

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

不要在你的li中使用floar: left，这会导致你的 vertical-align 无效，

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我只删除你里面的所有float: left

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