数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在水平方向排列显示元素？
本文将介绍如何在HTML中实现水平排列的显示效果。这可以通过设置样式中的“display: inline”属性或使用表格行来轻松实现。本文将演示如何在网页中将元素水平排列。首先，介绍了如何将无序列表项水平排列的方法。第二个例子演示了如何将段落文本水平排列。第三个例子则使用了不同大小的图像进行水平排列。
示例1：使用HTML将无序列表项水平排列
设计步骤
步骤1 − 创建一个HTML文件并开始编写代码。
步骤2 − 在<body>标签内添加一个<center>标签。
步骤3 − 在<center>标签内，添加一个<div>标签，并将其类名设置为“tab”。
步骤4 − 添加一个<style>标签，并为.tab类指定样式。
步骤5 − 使用浅色背景颜色，1px实线边框和深色边框颜色，宽度400px，高度50px。
步骤6 − 为<li>标签设置样式，使用“display: inline”属性以及其他样式。
步骤7 − 在div标签内创建无序列表。在浏览器中打开HTML文件并查看结果。
使用的文件：HRowDisplay1.html
HRowDisplay1.html代码
<!DOCTYPE html>
<html>
<head>
<title>Display in a horizontal row</title>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 400px;
height: 50px;
}
li {
display: inline;
word-spacing: 25px;
}
</style>
</head>
<body>
<center>
<h2>Display List Items in a horizontal row</h2>
<div class="tab">
<ul>
<li>
Name:-Hina
</li>
<li>
Age:-40
</li>
<li>
Lives_in:-UP
</li>
</ul>
</div>
</center>
</body>
</html>
示例2：使用HTML将段落文本水平排列
设计步骤
步骤1 − 创建一个名为HRowDisplay2.html的文件，然后在其中编写代码。
步骤2 − 为居中显示元素，在<body>标签内添加一个<center>标签。在<center>标签内，添加一个<div>标签作为容器。
步骤3 − 在<div>标签内，创建一个<table>标签，并将其类名设置为“tab”。
步骤4 − 使用<style>标签创建一个类标签来设置样式，然后为.tab类指定样式。
步骤5 − 使用十六进制颜色代码#e0dbdb作为背景颜色，1px实线边框和深色边框颜色，宽度600px，高度50px。
步骤6 − 在div标签之前创建四个段落标签，并在这些标签中写入文本内容。
步骤7 − 创建一个<tr>标签和四个<th>标签，并将上述<p>标签的副本分别放在每个<th>标签中。
步骤8 − 在浏览器中打开HTML文件并查看结果。
使用的文件：HRowDisplay2.html
HRowDisplay2.html代码
<!DOCTYPE html>
<html>
<head>
<title>Display in a horizontal row</title>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 600px;
height: 50px;
}
</style>
</head>
<body>
<center>
<h2>Displaying Lines</h2>
<p>This is line One</p>
<p>This is line Two</p>
<p>This is line Three</p>
<p>This is line Four</p>
<div>
<h2>Display Lines in a horizontal row</h2>
<table class="tab">
<tr>
<th>
<p>This is line One</p>
</th>
<th>
<p>This is line Two</p>
</th>
<th>
<p>This is line Three</p>
</th>
<th>
<p>This is line Four</p>
</th>
</tr>
</table>
</div>
</center>
</body>
</html>
示例3：使用HTML将图像水平排列
步骤1 − 创建一个名为HRowDisplay3.html的文件，并开始在该文件中编写代码。
步骤2 − 为居中显示body标签内的元素，添加一个<center>标签。
步骤3 − 添加一个<div>标签，并将其类名设置为“tab”。
步骤4 − 为.tab类设置样式，为此添加一个<style>标签。
步骤5 − 使用十六进制颜色代码“#e0dbdb”作为背景颜色，1px实线边框和深色边框颜色，宽度80%，高度50%。
步骤6 − 为<img>标签设置样式，并使用“display: inline”属性。
步骤7 − 在div标签内放置<img>标签，并使用不同大小的图像。在浏览器中打开HTML文件并查看结果。
使用的文件：HRowDisplay3.html
HRowDisplay3.html代码
<!DOCTYPE html>
<html>
<head>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 80%;
height: 50%;
}
img {
display: inline;
}
</style>
</head>
<body>
<div></div>
<body>
<center>
<h2>Display Images in a horizontal row</h2>
<div class="tab">
<img src="https://tutorialspoint.com/assets/questions/media/14186/play.jpg" />
<img src="https://tutorialspoint.com/assets/questions/media/14186/play.jpg" />
<img src="https://tutorialspoint.com/assets/questions/media/14186/play.jpg" />
<img src="https://tutorialspoint.com/assets/questions/media/14186/play.jpg" />
</div>
</center>
</body>
</html>
总结
本文通过三个不同的例子，介绍了如何在HTML中将网页元素水平排列。第一个例子展示了如何将无序列表水平排列。第二个例子将段落文本放在表格的<th>标签内，并水平排列。第三个例子使用了不同大小的图像进行水平排列。
717 次浏览
