「寬度自適應」修訂間的差異
跳至導覽
跳至搜尋
（→寬度自適應） |
|||
| （未顯示同一使用者於中間所作的 2 次修訂） | |||
| 第5行： | 第5行： | ||
====無框表格==== | ====無框表格==== | ||
table,th,td 的寬度是自適應的。而整個 table 是可以靠 align 屬性水平置中的。 | table,th,td 的寬度是自適應的。而整個 table 是可以靠 align 屬性水平置中的。 | ||
| + | |||
| + | ====display:table==== | ||
| + | |||
| + | ====display:inline-block==== | ||
| + | 行元素是自適應文本長度的 | ||
====最大寬度與最小寬度==== | ====最大寬度與最小寬度==== | ||
| 第21行： | 第26行： | ||
對 firefox 與 chrome 分別下寬度自適應的指示，再用 margin:auto; 將邊沿左右平分 | 對 firefox 與 chrome 分別下寬度自適應的指示，再用 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;