將 Element 轉成 Inline | 點燈坊

HTML 將 Element 分成 Inline、Block 與 Inline-block Element，透過 display: inline 可將 Block Element 強制轉成 Inline Element。

Version

CSS 3

Inline Element

代表性的 Inline Element 有：

• <span>
• <a>
• <input>
• <img>

Block Element

代表性 Block Element 有：

• <div>
• <ul>、<li>
• <p>
• <h1>

div

<template>
  <div>CSS</div>
  <div>Rocks</div>
</template>

由於 <div> 是 block，因此使用多個 <div> 時會換行。

display: inline

<template>
  <div class="item">CSS</div>
  <div class="item">Rocks</div>
</template>

<style scoped>
.item {
  display: inline
}
</style>

第 7 行

.item {
  display: inline
}

• display: inline：css 與 rocks class 都使用 display: inline 轉換成 inline，<div> 也能如 <span> 一樣不換行

Conclusion

• 透過 display: inline 可將原本 block 轉成 inline

Reference

MDN, display