在日常的前端布局中,我們會經常遇到一些行高設置問題,比如設置行高為父級高度。那么如何通過 CSS 實現呢?
.parent{ height: 100px; line-height: 100px; /*設置父級高度*/ } .child{ display: inline-block; height: inherit; /*繼承父級高度*/ }
以上代碼中,我們首先設置了一個高度為100px的父級元素,然后通過為父級元素設置 line-height 屬性使子元素的高度等于父級高度。最后,我們通過設置子元素的display屬性為inline-block,同時讓它的高度繼承父級高度來實現我們的需求。
總結起來就是:
- 設置父級元素的 line-height 屬性為父元素的高度
- 將子元素的高度繼承父級元素
- 設置子元素的 display 屬性為 inline-block
如此簡單的 CSS 代碼就完成了行高等于父級高度的需求。
上一篇限制最小屏 css
下一篇防下載css和js代碼