html - 在HTML中水平显示文章元素

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        3年前关闭。
                                                                                            
                
        
如何设置article元素以水平显示？内联而不是垂直，一个在另一个下面？

最佳答案

选项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>

关于html - 在HTML中水平显示文章元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36852575/