Wie kann ich den gesamten Inhalt einschließlich der Rahmen in den Spalten vertikal ausrichten?

Question

Bitte sehen codepen Referenz:.. http://codepen.io/rezasan/pen/apvMOR

Ich versuche, alle Inhalte in den Spalten zu machen (Datum, Titel und Button auch den Separator vertikal ausgerichtet werden Anzeigetabelle versucht, aber funktioniert nicht einige Erfordern Unterstützung von den Experten hier

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

nicht floar: left in Ihrem li verwenden, wird es dazu führen, dass vertical-align nicht gearbeitet,

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>

ich entfernen Sie einfach alle float: left in Ihrem 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%; 
}