讓CSS文字在同一行顯示，是網頁設計中常見的需求之一。例如，在制作導航菜單時，需要讓菜單項水平排列在同一行上，或者在制作圖片和文字布局時，需要讓文字和圖片在同一行上顯示。下面，我們來學習幾種實現該效果的方法。 方法一：使用float屬性 當我們想要讓多個元素在同一行顯示時，可以使用float屬性。float可以使元素浮動在文檔流中，不再占據原來的位置，從而使其他元素可以占據該位置。同時，在設置浮動的元素，需要添加clear屬性來清除浮動。 下面是使用float屬性實現文字在同一行顯示的示例代碼：

<style>
p {
float: left;
margin-right: 20px;
}
.clear {
clear: both;
}
</style>
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>
<p class="clear"></p>

以上代碼中，我們給每個段落添加了float: left;和margin-right: 20px;的樣式。這樣，每個段落都會向左浮動，并且相鄰的兩個段落之間會有20像素的間隔。最后，我們在代碼末尾添加了一個class為clear的空段落，用來清除浮動。 方法二：使用display屬性 另一種讓文字在同一行顯示的方法是使用display屬性。display屬性可以改變元素的顯示方式，例如將塊元素的顯示方式改為行內元素。 下面是使用display屬性實現文字在同一行顯示的示例代碼：

<style>
p {
display: inline-block;
margin-right: 20px;
}
</style>
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>

以上代碼中，我們給每個段落添加了display: inline-block;和margin-right: 20px;的樣式。這樣，每個段落都會以行內塊元素的方式顯示，并且相鄰的兩個段落之間會有20像素的間隔。 總結 讓CSS文字在同一行顯示，可以采用float、display等屬性。在使用這些屬性時，需要注意清除浮動或者添加父級元素的overflow屬性來防止元素溢出。同時，添加間距、字間距等樣式也可以讓文字在同一行上顯示更加美觀。