在 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>