CSS 如何使div元素内联显示

2023-03-13 23:37| 来源: 网络整理| 查看: 265

CSS 如何使div元素内联显示

CSS 是层叠样式表的缩写，它规定了HTML元素在各种媒体中的外观，包括打印、显示以及其他印刷和数字格式。通过CSS可以节省大量的工作。它可以同时管理几个网页的设计。

在这篇文章中，我们将学习如何用CSS使div元素内联显示，为此，我们首先要看一下用于使div元素内联显示的一些CSS属性 –

显示– display属性指定了一个元素的渲染框类型（显示行为）。在这里，我们将使用 display: flex 和 display: inline-block 属性。

浮动 – 使用浮动属性，一个元素可以被告知向左、向右或根本不浮动。这里我们将使用 float left 属性来显示浮动到左边的 div。

内联元素不在新的行上开始，只占用所需的宽度。你不能设置宽度和高度。

.inline-element { display: inline; width: 1000px; height: 1000px; }

以下是一些默认内联属性的元素 –

span

img

本身是内联的格式化标签 –

strong

small

内嵌块格式化为一个内嵌元素，不在新的一行开始。然而，你可以设置宽度和高度值。

.inline-block-element { display: inline-block; width: 1000px; height: 1000px; } 块元素在一个新的行上开始，并使用所有可用的宽度。你可以为宽度和高度设置值。

以下是一些默认的块属性的元素 –

div

section

为了使div组件出现在行内，我们将首先建立一些基本的HTML代码并应用各种CSS样式。

例子

在这个例子中，所有 div 元素的父 div 都设置了 display: flex 和 flex-direction: row 设置。由于 flex-direction: row 属性，包含在父 div 中的所有组件都将显示在一个行中。

.main { display: flex; flex-direction: row; font-size: 30px; color: red; border: 4px double red; padding: 5px; width: 400px; } .main div { border: 2px solid greenyellow; margin: 10px 20px; width: 100px; } Hello, World! Hello, World! Hello, World! 例子

在这个例子中，我们将为所有需要内联显示的 div 添加 display: inlineblock 属性。如果应用 display:inlineblock 属性，所有的 div 组件将被并排放置。

div { display: inline-block; color: red; border: 2px solid greenyellow; margin: 10px 20px; width: 120px; font-size: 40px; } Hello, World! Hello, World! Hello, World! 例子

在这个例子中，为了以内联方式显示所有的div元素，我们将为它们赋予float: left属性。此外，用户还可以利用float: right的CSS选项，从右边开始以相反的顺序显示所有的div组件。

div { float: left; color: red; border: 2px solid greenyellow; margin: 10px 20px; width: 120px; font-size: 40px; } Hello, World! Hello, World! Hello, World! 例子

这种方法使用 span 元素而不是 div 元素。如果用户只需要在div标签中写入文本，你可以使用span标签，因为所有的span元素默认是内联显示的。

span { color: green; border: 2px solid red; margin: 10px 20px; width: 100px; font-size: 30px; } Hello World! Hello World! Hello World!

与display: inline的主要区别是，你可以使用display: inline块来设置一个元素的宽度和高度。

同时display: inline block保留了上下边距/填充，但在display: inline中没有。与display: block的主要区别是，display: inlineblock不会在一个元素后添加换行符，所以一个元素可以紧挨着另一个元素。

下面的片段演示了 display: inline、display: inline-block 和 display: block 的不同行为。

span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } 创建导航链接的内联块

常见的显示用法。内联块是用于水平显示列表项，而不是垂直显示。下面的例子创建了一个水平导航链接。

.nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }

【本文地址】

公司简介

联系我们