在HTML中水平顯示文章元素

Question

如何將article元素設置爲水平顯示;內聯，而不是垂直，一個在另一個之下？

Answer 1

選項1

• 設置float:left

article { 
 
    border: 1px red solid; 
 
    float: left; 
 
    width: 100px 
 
}

<article>article 1</article> 
 
<article>article 2</article> 
 
<article>article 3</article>

選項2

• 設置display:inline-block

body { 
 
    /*fix-inline-block*/ 
 
    font-size: 0 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    display: inline-block; 
 
    width: 100px; 
 
    /*reset the font*/ 
 
    font-size: 16px 
 
}

<article>article 1</article> 
 
<article>article 2</article> 
 
<article>article 3</article>

選項3

• 設置display:table/table-cell

section { 
 
    display: table 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    display: table-cell; 
 
    width: 100px 
 
}

<section> 
 
    <article>article 1</article> 
 
    <article>article 2</article> 
 
    <article>article 3</article> 
 
</section>

選項4

• 設置display:inline-flex

body { 
 
    /*fix-inline-flex*/ 
 
    font-size: 0 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    display: inline-flex; 
 
    width: 100px; 
 
    /* reset the font */ 
 
    font-size: 16px 
 
}

<article>article 1</article> 
 
<article>article 2</article> 
 
<article>article 3</article>

選項5

• 設置display:flex

section { 
 
    display: flex; 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    width: 100px; 
 
    font-size: 16px 
 
}

<section> 
 
    <article>article 1</article> 
 
    <article>article 2</article> 
 
    <article>article 3</article> 
 
</section>