极客教程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
-
a
-
img
本身是内联的格式化标签 –
- em
-
strong
-
i
-
small
内嵌块 格式化为一个内嵌元素，不在新的一行开始。然而，你可以设置宽度和高度值。
.inline-block-element {
display: inline-block;
width: 1000px;
height: 1000px;
}
- 块 元素在一个新的行上开始，并使用所有可用的宽度。你可以为宽度和高度设置值。
以下是一些默认的块属性的元素 –
- div
-
h1
-
p
-
li
-
section
为了使div组件出现在行内，我们将首先建立一些基本的HTML代码并应用各种CSS样式。
例子
在这个例子中，所有 div 元素的父 div 都设置了 display: flex 和 flex-direction: row 设置。由于 flex-direction: row 属性，包含在父 div 中的所有组件都将显示在一个行中。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.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;
}
</style>
</head>
<body>
<div class="main">
<div>Hello, World!</div>
<div>Hello, World!</div>
<div>Hello, World!</div>
</div>
</body>
</html>
例子
在这个例子中，我们将为所有需要内联显示的 div 添加 display: inlineblock 属性。如果应用 display:inlineblock 属性，所有的 div 组件将被并排放置。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
display: inline-block;
color: red;
border: 2px solid greenyellow;
margin: 10px 20px;
width: 120px;
font-size: 40px;
}
</style>
</head>
<body>
<div>Hello, World!</div>
<div>Hello, World!</div>
<div>Hello, World!</div>
</body>
</html>
例子
在这个例子中，为了以内联方式显示所有的div元素，我们将为它们赋予float: left属性。此外，用户还可以利用float: right的CSS选项，从右边开始以相反的顺序显示所有的div组件。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
float: left;
color: red;
border: 2px solid greenyellow;
margin: 10px 20px;
width: 120px;
font-size: 40px;
}
</style>
</head>
<body>
<div>Hello, World!</div>
<div>Hello, World!</div>
<div>Hello, World!</div>
</body>
</html>
例子
这种方法使用 span 元素而不是 div 元素。如果用户只需要在div标签中写入文本，你可以使用span标签，因为所有的span元素默认是内联显示的。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
span {
color: green;
border: 2px solid red;
margin: 10px 20px;
width: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<span>Hello World!</span>
<span>Hello World!</span>
<span>Hello World!</span>
</body>
</html>
与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;
}