在 CSS 中,同一行顯示是指多個元素在同一行上顯示,而不是默認每個元素占據屏幕的一行。同行顯示可以讓多個元素更緊湊地放在一個容器內,從而節省布局空間。
/* 使用 display: inline 屬性指定元素在同一行上顯示 */ span{ display: inline; } /* 使用 float 屬性指定元素在同一行上浮動 */ div{ float: left; /* 或 float: right; */ }
在使用 display: inline 屬性時,需要注意以下幾點:
- 行內元素默認是 display: inline,但塊級元素默認是 display: block,需要使用 display: inline 屬性調整。
- 使用 display: inline 屬性可以讓元素在同一行上顯示,但并不會讓它們垂直居中。
在使用 float 屬性時,需要注意以下幾點:
- 浮動元素不再保持其默認的塊級結構,而是變成行內元素。
- 浮動會將元素從布局流中移除,需要使用 clear 屬性清除浮動影響。