ItzJavaCraft ItzJavaCraft - 7 months ago 9
HTML Question

Display article element horizontally in HTML

How can I set the

article
element to display horizontally; inline, instead of vertically, one below the other?

Answer

option 1

  • set float:left

article {
  border: 1px red solid;
  float: left;
  width: 200px
}
<article>article 1</article>
<article>article 2</article>
<article>article 3</article>

option 2

  • set display:inline-block

body {
  /*fix-inline-block*/
  font-size: 0
}
article {
  border: 1px red solid;
  display: inline-block;
  width: 200px;
  font-size:16px
}
<article>article 1</article>
<article>article 2</article>
<article>article 3</article>

option 3

  • set display:table/table-cell

section {
  display: table
}
article {
  border: 1px red solid;
  display: table-cell;
  width: 200px
}
<section>
  <article>article 1</article>
  <article>article 2</article>
  <article>article 3</article>
</section>

option 4

  • set display:inline-flex

body {
  /*fix-inline-flex*/
  font-size: 0
}
article {
  border: 1px red solid;
  display: inline-flex;
  width: 200px;
  font-size:16px
}
<article>article 1</article>
<article>article 2</article>
<article>article 3</article>

option 5

  • set display:flex

section {
  display: flex;
}
article {
  border: 1px red solid;
  width: 200px;
  font-size: 16px
}
<section>
  <article>article 1</article>
  <article>article 2</article>
  <article>article 3</article>
</section>