在CSS中,讓并列的元素并行排列是一個常見的需求,要實現(xiàn)這一點,可以使用CSS的`display`屬性或者`float`屬性。
### 使用display屬性
CSS的`display`屬性可以用來控制元素的顯示方式,默認(rèn)情況下,元素是塊級元素,會獨占一行,我們可以將`display`屬性設(shè)置為`inline`或`inline-block`,使元素變?yōu)樾袃?nèi)元素或行內(nèi)塊級元素。
#### 行內(nèi)元素
當(dāng)`display`屬性設(shè)置為`inline`時,元素會變成行內(nèi)元素,與其他元素在同一行顯示。
```css
.element {
display: inline;
```
#### 行內(nèi)塊級元素
當(dāng)`display`屬性設(shè)置為`inline-block`時,元素會變成行內(nèi)塊級元素,既可以在同一行顯示,也可以設(shè)置寬度和高度。
```css
.element {
display: inline-block;
width: 100px;
height: 100px;
```
### 使用float屬性
CSS的`float`屬性可以讓元素浮動到其父元素的左側(cè)或右側(cè),從而實現(xiàn)并行排列。
```css
.element {
float: left; /* 或 float: right */
```
### 示例代碼
下面是一個示例HTML文件,展示了如何使用CSS讓兩個并列的元素并行排列:
```html
```
在這個示例中,兩個`div`元素通過設(shè)置`display: inline-block`或`float: left`實現(xiàn)了并行排列,每個元素都有100像素的寬度和高度,并且有一個可選的邊框。