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