以HTML格式水平显示文章元素 [英] Display article element horizontally in HTML

问题描述

如何设置文章元素水平显示;

选项1

• 设定 float：left

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

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

$ b

选项2

• 设置 display：inline-block

  body {/ * fix -inline-block * / font-size：0} article {border：1px red solid; display：inline-block; width：100px; / *重置字体* / font-size：16px}  

 < article> article 1< / article>< article> article 2< / article>< article> article 3< / article>   
 
 
 
选项3 
 
 
 
 
 
设置 ：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>  
 
 
 
 
 
 < h1>选项4  
 
 
 
 
设置 display：inline-flex  
 
 
 
 
 
 
 
 
  body {/ * fix-inline-flex * -size：0} article {border：1px red solid; display：inline-flex; width：100px; / *重置字体* / font-size：16px}  
 
 < article> article 1< / article>< article> article 2< / article>< article> article 3< / article>   
 
 
 
选项5 
 
 
 
 
 
设置 ：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>  
 
 
 
 
How can I set the article element to display horizontally; inline, instead of vertically, one below the other?
解决方案
option 1


set  float:left  




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

<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: 100px;
  /*reset the font*/
  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: 100px
}

<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: 100px;
  /* reset the font */
  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: 100px;
  font-size: 16px
}

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





                        
这篇关于以HTML格式水平显示文章元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！