「寬度自適應」修訂間的差異
跳至導覽
跳至搜尋
(→水平置中) |
|||
| 第27行: | 第27行: | ||
===水平置中=== | ===水平置中=== | ||
#margin:auto; | #margin:auto; | ||
| + | |||
| + | ===參考資料=== | ||
| + | #[https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/ 理解CSS3 max/min-content及fit-content等width值] | ||
於 2019年1月29日 (二) 21:53 的最新修訂
寬度自適應
指元素的寬度會隨著內文的多寡而自動調整。
無框表格
table,th,td 的寬度是自適應的。而整個 table 是可以靠 align 屬性水平置中的。
display:table
display:inline-block
行元素是自適應文本長度的
最大寬度與最小寬度
下以下 CSS 指示:
max-width:300px; min-width:100px; word-wrap:break-word;
讓容器伸縮,過長時自動換行。
css3 的 fit-content
對選擇器(如 UL)下以下 CSS 指示:
width:fit-content; width:-moz-fit-content; width:-webkit-fit-content; margin:auto;
對 firefox 與 chrome 分別下寬度自適應的指示,再用 margin:auto; 將邊沿左右平分
水平置中
- margin:auto;