垂直內浮動DIV是裏面李

對齊項目我有了div的裏面垂直內浮動DIV是裏面李

<ul> 
    <li> 
     <div class="date">today</div> 
     <div class="desc">lorem ipsum</div> 
     <div class="action"> 
      <p> 
       <a class="button">X</a> 
      </p> 
     </div> 
    </li> 
    <li>....</li> 
    <li>....</li> 
</ul>

我怎麼能垂直對齊內div.action是a.button名單？通過使用與Susy產生

CSS爲列表和CSS看起來是這樣的：

ul { 
    list-style: none outside none; 
} 
li { 
    margin-left: 12.766%; 
    margin-right: 12.766%; 
    margin-bottom: 10px; 
    background-color: #eee; 
    display: block; 
} 
li:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 

.date { 
    float: left; 
    margin-right: 2.12766%; 
    width: 10.6383%; 
} 
.desc { 
    float: left; 
    margin-right: 2.12766%; 
    width: 74.4681%; 
} 

.action { 
    float: right; 
    text-align: center; 
    margin-right: 0; 
    width: 10.6383%; 
}

我不知道李高度，因爲「說明」文本可以是任意長度。

這裏是codepen.io代碼 - >http://codepen.io/anon/pen/CFhos

來源

2014-09-29 user1394520

任何'float'ed會自動上升到其包含塊的頂部。如果你想讓它垂直居中，你將不得不使用對齊右側按鈕的不同方法。 – 2014-09-29 08:16:47

Flexbox，就可以比對任何事情 - 甚至浮動元素...

只需添加以下規則到li：

display: flex; 
align-items: center; /*align vertical */

Updated CODEPEN

來源

2014-09-29 08:20:17 Danield

你可以這樣做•不用浮動：

ul { 
    list-style: none outside none; 
} 
li { 
    display: table; 
    margin-left: 12.766%; 
    margin-right: 12.766%; 
    margin-bottom: 10px; 
    background-color: #eee; 
} 
p { 
    display: table-cell; 
    margin: 0; 
    padding: 0; 
} 
li:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 

.date { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 2.12766%; 
    width: 10.6383%; 
} 
.desc { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 2.12766%; 
    width: 74.4681%; 
} 

.action { 
    display: table-cell; 
    vertical-align: middle; 
    margin-right: 0; 
    width: 10.6383%; 
}

http://codepen.io/anon/pen/yxhkA

來源

2014-09-29 08:21:30

可以樣式按鈕來完成它：

.button{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

這裏舉例：http://jsfiddle.net/4amdxtq8/

來源

2014-09-29 08:24:41

垂直內浮動DIV是裏面李

回答

相關問題