0
請參閱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>
我明白了。我錯過了。所以我們仍然可以在不使用浮動的情況下對齊列。大。感謝您的精彩幫助。非常感激!有用。 –