如何垂直对齐所有内容，包括列中的边框？

Question

参考codepen：http://codepen.io/rezasan/pen/apvMOR

我正在尝试使列中的所有内容（日期、标题和按钮甚至分隔符垂直对齐。尝试显示 table 但不起作用。需要专家的帮助这里。

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 不起作用，

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>

我只是删除了你的 li

中的所有 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%;
}

如何垂直对齐所有内容，包括列中的边框？

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

html

css

grid

vertical-alignment

css-tables