標題：CSS讓div在一行顯示

1. 創建一個HTML文檔，其中包含一個div元素和一個包含div元素的HTML元素。

2. 在CSS中為div元素設置合適的樣式，使其在一行顯示。

HTML:

<div class="row">

<div class="col-md-4">

<h1>Hello, World!</h1>

</div>

<div class="col-md-4">

<p>This is a paragraph.</p>

</div>

</div>

.row {

display: flex;

flex-wrap: wrap;

.col-md-4 {

width: 200px;

background-color: blue;

padding: 10px;

text-align: center;

上述示例中，我們創建了一個名為“row”的類，它使用display: flex；屬性將div元素分配到一個父div元素中的“col-md-4”類中。使用flex-wrap: wrap；屬性，我們可以確保div元素始終顯示在一行。使用width屬性和background-color屬性，我們可以設置div元素的背景顏色和樣式。使用padding屬性，我們可以設置div元素周圍的邊距。最后，使用text-align屬性，我們可以設置div元素中的文本對齊方式。

當我們將上述示例中的HTML和CSS代碼保存為一個文件，并在瀏覽器中打開時，我們將看到以下結果：

<div class="row">

<div class="col-md-4 h1">Hello, World!</div>

<div class="col-md-4 p">This is a paragraph.</div>

</div>

在這個例子中，我們創建了一個藍色的背景，一個居中的h1和一個垂直的段落。我們可以看到，div元素已經正確地顯示在一行上了。