<h4><code>&lt;div&gt;</code> 本身為 block element</h4>
<p>利用<code>display: inline 改變 display property</code></p>
<ul>
<li><p>原本<code>&lt;div&gt;</code>預設的形式</p>
<div class='div'>div1</div> 
<div class='div'>div2</div> 
<div class='div'>div3</div>
  </li>
  <li>
<p>利用 <code>display: inline 改變 display property</code>，從 block 形式變成 inline 形式</p>
<div class='inline div'>div1</div>
<div class='inline div'>div2</div>
<div class='inline div'>div3</div>
  </li>
  <ul>
.div {
  background: yellow;
  border: 1px black solid;
  width: 50px;
  margin: 5px;
}

.inline {
  display: inline
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.