【问题标题】: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>
    

    【讨论】:

      猜你喜欢
      • 2019-05-30
      • 2013-11-26
      • 1970-01-01
      • 1970-01-01
      • 2015-12-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-03-22
      相关资源
      最近更新 更多