如何将元素设置为行内并排显示？

你的问题核心是h3是块级元素，默认会独占一行，所以才会垂直排列。下面是几种简单的解决办法：

• 使用display: inline-block（推荐）
  这个属性既保留块级元素可设置margin、padding的特性，又能让元素并排显示。修改后的代码如下：

  <h3 style="margin-left:8vh; display: inline-block;">category</h3>
  <h3 style="margin-left:8vh; display: inline-block;">category</h3>
  

• 使用display: inline
  把h3改成纯行内元素，直接实现并排，但行内元素无法设置上下方向的margin和padding，也不能自定义宽高，适合简单场景：

  <h3 style="margin-left:8vh; display: inline;">category</h3>
  <h3 style="margin-left:8vh; display: inline;">category</h3>
  

• 使用Flexbox布局
  给两个h3的父容器添加display: flex，这种方式更灵活，还能轻松控制元素的对齐、间距等，适合复杂布局需求：

  <div style="display: flex;">
    <h3 style="margin-left:8vh;">category</h3>
    <h3 style="margin-left:8vh;">category</h3>
  </div>
  

内容的提问来源于stack exchange，提问作者manu p