如何将内联元素排成一行？答案

【问题标题】：How to put inline elements in a row?如何将内联元素排成一行？
【发布时间】：2022-08-14 05:16:34
【问题描述】：

有没有办法让这些元素连续内联？

<h3 style=\"margin-left:8vh\">category</h3><h3 style=\"margin-left:8vh\">category</h3>

现在，它们一个一个出现在另一个之上。我们可以把它们排成一排吗？

标签： html css

【解决方案1】：

您可以将display:inline-block; 添加到元素本身：

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

或者您可以使用flexbox。使用flexbox，将两个元素包装在div 中，并在div 上应用内联样式：

<div style="display:flex; flex-direction: row; ">

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

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

<p>display:flex; flex-direction: row; justify-content: flex-end;</p>
<div style="display:flex; flex-direction: row; justify-content: flex-end;">
  <h3 style="margin-left:8vh">category</h3>
  <h3 style="margin-left:8vh">category</h3>
</div>

<p>display:flex; flex-direction: row; justify-content: flex-end;</p>
<div style="display:flex; flex-direction: row;justify-content: flex-end;">
  <h3 style="margin-left:8vh">category</h3>
  <h3 style="margin-left:8vh">category</h3>
</div>

【讨论】：