如何使用 CSS 使 div 元素顯示為內聯？

使用 CSS 使 div 元素顯示為內聯是一個非常簡單易行的過程。我們可以使用多種方法來使 div 元素顯示為內聯。

在本文中，我們將瞭解五種不同的方法以及其他一些屬性，以使div元素顯示為內聯。我們有三個 div 框，它們是塊級元素，我們的任務是使用CSS使 div 元素顯示為內聯。

使用 CSS 使 div 元素顯示為內聯的方法

以下是使用 CSS 使 div 元素顯示為內聯的方法列表，我們將在本文中逐步解釋並提供完整的示例程式碼進行討論。

使用 display 屬性將 div 顯示為內聯

為了使用 CSS 使 div 元素顯示為內聯，我們使用了 CSS display 屬性，該屬性指定元素應如何顯示。

  • 我們使用 div 標籤建立了三個框，並使用.main div來設計這些框。
  • 為了設計這些框，我們已將背景顏色設定為綠色，文字顏色設定為白色，使用文字對齊居中對齊文字，添加了填充和白色邊框。
  • 我們使用了"display: inline;"，它使 div 元素顯示為內聯。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS display 屬性使 div 元素顯示為內聯。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        To make div elements display inline using CSS
    </title>
    <style>
        .main div {
            display: inline;
            background-color: #04af2f;
            color: white;
            text-align: center;
            border: 2px solid white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>
        To Make div Elements Display inline Using CSS
    </h3>
    <p>
        In this example we have used <strong>inline
        </strong> property to make div elements
        display inline using CSS
    </p>
    <div class="main">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
    </div>
</body>
</html>

使 div 元素內聯的備用 display 屬性值

以下是一些可用於使 div 元素顯示為內聯的更多 display 屬性值

display: inline-block
display: inline-flex
display: flex
display: table-cells

使用 float 屬性將 div 顯示為內聯

在這種方法中，我們使用了 CSS float 屬性，以使用 CSS 使 div 元素顯示為內聯。

  • 我們建立並設計了與第一種方法相同的框，並使用 CSS 行高 屬性垂直居中對齊文字內容。
  • 我們使用了"float: left;"，它使 div 元素顯示為內聯。我們可以使用 float 屬性的left或right值。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS float 屬性使 div 元素顯示為內聯。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        To make div elements display inline using CSS
    </title>
    <style>
        .main div {
            float: left;
            background-color: #04af2f;
            color: white;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 2px solid white;
        }
    </style>
</head>
<body>
    <h3>
        To Make div Elements Display inline Using CSS
    </h3>
    <p>
        In this example we have used <strong>float
        </strong> property to make div elements
        display inline using CSS
    </p>
    <div class="main">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
    </div>
</body>
</html>

使用 flex 屬性將 div 顯示為內聯

在這種使用 CSS 使 div 元素顯示為內聯的方法中，我們使用了 CSS flex 屬性。

  • 我們使用.main div來設計這些框，這與第一種方法類似。
  • 在第二步中，我們使用main類將框設為 flex-items。
  • 我們使用了"flex-direction: row;"，它將框排列成一行，使它們顯示為內聯元素。
  • 我們還可以使用 flex-direction 屬性的row-reverse值。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS flex-direction 屬性使 div 元素顯示為內聯。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        To make div elements display inline using CSS
    </title>
    <style>
        .main {
            display: flex;
            gap: 5px;
            flex-direction: row;
        }
        .main div {
            background-color: #04af2f;
            color: white;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <h3>
        To Make div Elements Display inline Using CSS
    </h3>
    <p>
        In this example we have used <strong>flex
        -direction</strong> property to make div elements
        display inline using CSS
    </p>
    <div class="main">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
    </div>
</body>
</html>

使用 grid 屬性將 div 顯示為內聯

在這種方法中，我們使用了 CSS grid 屬性，該屬性使 div 框的行為類似於網格項，使我們能夠在行和列中定位它們。

  • 我們使用main類將 div 框顯示為網格，並設定寬度，該寬度控制框之間的距離。
  • 我們使用了"grid-template-columns: auto auto auto;"屬性，該屬性將 div 框顯示在三列中，使它們看起來像內聯元素。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS grid-template-columns 屬性使 div 元素顯示為內聯。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        To make div elements display inline using CSS
    </title>
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto ;
            width: 60%;
        }
        .main div {
            background-color: #04af2f;
            color: white;
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <h3>
        To Make div Elements Display inline Using CSS
    </h3>
    <p>
        In this example we have used <strong>grid-
        template-columns</strong> property to make 
        div elements display inline using CSS.
    </p>
    <div class="main">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>        
    </div>
</body>
</html>

使用 column 屬性將 div 顯示為內聯

為了使用 CSS 使 div 元素顯示為內聯，我們使用了 CSS columns 屬性，該屬性用於設定列數和列寬。

  • 我們使用main類設定列數，並使用column-gap指定列之間的距離。
  • 我們使用了"column-count: 6;"屬性，該屬性將 div 顯示為內聯，並將其值設定為 6 以保持框之間的距離。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS columns 屬性使 div 元素顯示為內聯。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        To make div elements display inline using CSS
    </title>
    <style>
        .main {
            column-count: 6;
            column-gap: 10px; 
        }
        .main div {
            background-color: #04af2f;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>
        To Make div Elements Display inline Using CSS
    </h3>
    <p>
        In this example we have used <strong>column
        </strong> property to make div elements 
        display inline using CSS.
    </p>
    <div class="main">
        <div>Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
    </div>
</body>
</html>

結論

使用 CSS 使 div 元素顯示為內聯是一個非常簡單的過程，並且有很多方法可以做到這一點。在本文中，我們瞭解了各種方法，包括：使用 CSS display 屬性、使用float屬性、使用flex屬性、使用grid屬性以及使用columns屬性。

更新於：2024年8月21日

4K+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

立即開始
廣告