內容轉自CSS世界，理解之后進行了簡化，簡化后代碼：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CSS世界--展開/收起功能</title> <style> .table { display: table; width: 100%; width: calc(100% - 30px); max-width: 400px; margin: auto; table-layout: fixed; text-align: left; } .td { display: table-cell; padding: 5px; } input[type="checkbox"] { position: absolute; clip: rect(0 0 0 0); } .check-in, .check-out { color: #34538b; cursor: pointer; } .check-out { display: none; } :checked ~ .check-out { display: inline-block; } :checked ~ .check-in { display: none; } .element { max-height: 0; overflow: hidden; transition: max-height .5s; } :checked ~ .element { max-height: 666px; } </style> </head> <body> <div class="table"> <div class="td"> <input id="check2" type="checkbox"> <p>個人覺得，display:table-cell最強的應用是可以任意個數列表的等寬效果。</p> <div class="element"> <p>display:table-cell其他一些應用，例如，兩欄自適應布局，垂直居 中效果等等都是可以通過其他技術手段模擬出來的，但是，根據列表個數 自動等寬的效果，其他CSS是很難模擬的，尤其當需要兼容IE8瀏覽器的時 候。</p> <p>然而，此方法也有局限性，就是只能實現單行列表的等分，所以，如 果我們希望列表數目超過一定值的時候變成多行，就需要根據數目不同， 輸出不同的DOM結構，僅僅靠CSS有難度。</p> </div> <label for="check2" class="check-in">更多↓</label> <label for="check2" class="check-out">收起↑</label> </div> </div> </body> </html>