如何使相对布局在水平方向添加元素？答案

【问题标题】：How to make relative layout add elements in a horizontal direction?如何使相对布局在水平方向添加元素？
【发布时间】：2019-09-07 21:02:34
【问题描述】：

为什么在列中垂直添加相关元素。是否可以水平显示元素而不是垂直显示？就像一行而不是一列。

【问题讨论】：

如果有人对问题进行了降级，至少告诉什么问题？
您因在提问前不进行搜索而被否决。这是一个相当基本的问题。如果您将鼠标悬停在否决按钮上，则标准之一是“不显示任何研究工作”。如果您无法通过 google 或其他搜索找到解决方案，请在您的答案中包含该解决方案和您的搜索字词。

标签： html css

【解决方案1】：

将位置设置为相对不一定决定水平与垂直放置的顺序。这就是块级元素和内联元素的区别。

块级元素（例如div）默认显示在新的一行，inline 元素（例如span）出现在同一行，如果可用宽度允许的话。

你可以在effect here看到这个

您可以通过在 CSS 中设置元素来覆盖默认的 display。

More on Block level elements from MDN

“块级”是HTML（超文本标记语言）的分类元素，与“内联”元素形成对比。块级元素只能出现在一个元素中。他们最重要的特点是它们通常用换行符格式化在元素之前和之后（从而创建一个独立的块内容）。也就是说，它们占据了容器的宽度。

More on Inline elements

“内联”是 HTML 元素的分类，与 “块级”元素。内联元素可以出现在块级内或其他内联元素。它们占据了内容的宽度。内联元素和块级元素之间的区别包括 [...] 格式，默认情况下，内联元素不以新行开头。

【讨论】：

非常感谢伙计！这对我帮助很大。
@user274951 没问题，不要忘记标记为已接受，无论哪个答案最有帮助 - 无论是这个还是另一个

【解决方案2】：

我相信您正在寻找的是 display:inline-block CSS 属性。默认情况下，元素使用display:block 显示，这就是它们显示为“列”的原因。

试试这个作为例子。

HTML：

<div>Relative Div 1</div>
<div>Relative Div 2</div>
<div>Relative Div 3</div>

CSS：（添加了一些行以使其更清楚地了解它在做什么。）

div {
    width: 50px;
    height:50px;
    background:#ff0000;
    margin:5px;
    position:relative;
    display: inline-block;
}

WORKING DEMO

【讨论】：

【解决方案3】：

您的问题不是很清楚...也许您的元素处于默认显示状态（显示：块）。您可以尝试将 display: inline-block 放入您的元素中。

示例：

  <style>
  .whatever{display:inline-block;}
  </style>

  <div class="whatever">....</div>
  <div class="whatever">....</div>
  <div class="whatever">....</div>
  <div class="whatever">....</div>

【讨论】：