数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用CSS创建左对齐文本和右对齐图标的div？
<div>标签用于指定一个分区。它表示HTML页面中的一个容器或一个部分。有时，在一个div容器内，需要同时显示文本和图标。有时，需要将文本左对齐，同时将图标放在同一行的右侧。
CSS或层叠样式表是指用于格式化HTML文档的样式规范。它用于为网页及其元素设置样式。
在这篇HTML-CSS文章中，通过三个不同的示例，说明了如何在div标签内将文本左对齐，图标右对齐的方法。示例1中，使用CSS的float属性将文本左对齐，图标右对齐。示例2中，使用CSS的flex属性将文本右对齐，图标左对齐。示例3中，使用表格概念将div内容左对齐和右对齐。
这些示例中使用的图标
以下标签用于在这些示例中显示“相册”图标。
<i class="material-icons">album</i>
为此，在html页面的head部分使用了以下库。
<link rel="stylesheet" href= "https://fonts.googleapis.ac.cn/icon?family=Material+Icons">
示例1：使用CSS float创建左对齐文本和右对齐图标的div。
在这个例子中，为“container”类和“classfor icon”类定义了两种样式。对于图标，使用了属性float: right。
使用的文件：divrightleftalign1.html
divrightleftalign1.html的代码
<!DOCTYPE html>
<html>
<head>
<title>LEFT TEXT RIGHT ICON</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.ac.cn/icon?family=Material+Icons">
<style>
.container {
background-color:rgb(204, 207, 21);
color:rgb(27, 27, 27);
font-size: 30px;
}
.classforicon {
float: right;
}
</style>
</head>
<body>
<div class="container">
<div>
<p class="text">Sample Music Item 1
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
<div>
<p class="text">Sample Music Item 2
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
<div>
<p class="text">Sample Music Item 3
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
</div>
</body>
</html>
查看结果
要查看结果，请在浏览器中打开divrightleftalign1.html。检查结果。
示例2：使用CSS flex创建左对齐文本和右对齐图标的div。
在这个例子中，定义了三种样式。对于“main_container”类，使用display: flex。对于“flex_col1”类，使用text-align: left；对于“flex_col2”类，使用text-align: right。
使用的文件：divrightleftalign2.html
divrightleftalign2.html的代码
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.ac.cn/icon?family=Material+Icons">
<style>
.main_container {
display: flex;
background-color: #2e2b2b;
color:beige;
font-size: 20px;
}
.flex_col1 {
flex: 1;
text-align: left;
}
.flex_col2 {
flex: 1;
text-align: right;
}
</style>
</head>
<body>
<div class="main_container">
<b class="flex_col1">
Music Album Number 1
</b>
<span class="flex_col2">
<i class="material-icons">album</i>
</span>
</div>
<div class="main_container">
<b class="flex_col1">
Music Album Number 2
</b>
<span class="flex_col2">
<i class="material-icons">album</i>
</span>
</div>
<div class="main_container">
<b class="flex_col1">
Music Album Number 3
</b>
<span class="flex_col2">
<i class="material-icons">album
</span>
</div>
</body>
</html>
查看结果
要查看结果，请在浏览器中打开divrightleftalign2.html。检查结果。
示例3：使用表格创建左对齐文本和右对齐图标的div。
在这个例子中，定义了三种样式。对于“tablecontainer”类，使用display: table。对于“table_cell1”类，使用text-align: left；对于“table_cell2”类，使用text-align: right。
使用的文件：divrightleftalign3.html
divrightleftalign3.html的代码
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.ac.cn/icon?family=Material+Icons">
<style>
.tableContainer {
display: table;
width: 100%;
background-color: #189943;
color:rgb(14, 13, 13);
font-size: 20px;
}
.tablecell1 {
text-align: left;
display: table-cell;
}
.tablecell2 {
text-align: right;
display: table-cell;
}
</style>
</head>
<body>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 1
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 2
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 3
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
</body>
</html>
查看结果
要查看结果，请在浏览器中打开divrightleftalign3.html。检查结果。
在这篇HTML-CSS文章中，通过三个不同的示例，介绍了创建左对齐文本和右对齐图标的div的各种方法。在第一个示例中，演示了如何使用CSS的float属性创建右对齐图标和左对齐文本的div。在下一个示例中，我们使用CSS flex属性演示了相同的功能。在最后一个示例中，使用CSS的表格概念创建了左对齐文本和右对齐图标的div。
2K+ 次浏览
