如何使用 CSS 制作文本左对齐、图标右对齐的 div?
<div> 标签用于指定分区。它表示 HTML 页面中的容器或部分。有时，在 div 容器内需要同时包含文本和图标。有时，需要将文本左对齐，同时将图标放在同一行的右侧。
CSS(层叠样式表)是指用于格式化 HTML 文档的样式规范。它用于为网页及其元素提供样式。
这篇 HTML-CSS 文章通过三个不同的示例，展示了如何在 div 标签内将文本左对齐、图标右对齐。在示例 1 中，使用 CSS 的浮动属性将文本左对齐、图标右对齐。在示例 2 中，CSS 的 flex 属性用于将文本右对齐，将图标左对齐;在示例 3 中，使用表格概念将 div 内容左右对齐。
这些示例中使用的图标
以下标签用于在这些示例中显示"相册"图标。
<i class="material-icons">album</i>
为此，在 html 页面的 head 部分中使用了以下库
<link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons">
示例 1:使用 CSS 浮动元素创建文本左对齐、图标右对齐的 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.com/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.com/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.com/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 属性创建文本左对齐、图标右对齐的 div。最后一个示例展示了如何使用 CSS 的表格概念创建文本左对齐、图标右对齐的 div。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
