我试图将材质图标与文本对齐，但不起作用。这是html im使用：
<!DOCTYPE html>
<body scroll="no" style="overflow: hidden">
<html>
<head>
<body>
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<style>
li {
list-style: none;
display: inline;
text-align: right;
}
a {
text-decoration: none;
text-align: right;
}
enabled {
display: inline;
}
</style>
<style>
.material-icons-outlined.orange600 { color: grey; }
</style>
<style>
.material-icons-outlined.md-36 { font-size: 16px; }
</style>
<li>
<a href="https://" target="_blank"class="material-icons-outlined md-36 orange600">check_box</a>
</li>
<style>
body {
font-family: 'Inter';font-size: 14px;color: black;text-align: left;
}
</style>
<a>Enabled<a>
如果有人能帮忙，我们将不胜感激。谢谢
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style></style>
</head>
<body>
....
</body>
</html>
请使用此格式，而不是多次使用body和style标记。
首先，HTML和CSS的格式非常糟糕。试着改进它。而且你只能使用<li>应该在<ul>或<ol>标签中。
所以你的代码应该像这个
<style>
body {
font-family: 'Inter';font-size: 14px;color: black;text-align: left;
}
ul{
list-style:none;
display:flex;
}
</style>
<ul>
<li>
<a href="http://" target="_blank"class="material-icons-outlined md-36 orange600">check_box</a>
<li>
<a>Enabled</a>
</ul>
它将对齐图标和文本属性。
试试这个：
body {
font-family: 'Inter';
font-size: 14px;
color: black;
}
a {
text-decoration: none;
text-align: right;
}
.material-icons-outlined.orange600 {
color: grey;
}
.material-icons-outlined.md-36 {
font-size: 16px;
}
.checkbox{
display: flex;
justify-content: center;
}
<div class="checkbox">
<a href="https://" target="_blank"class="material-icons-outlined md-36 orange600">check_box</a>
<a>Enabled<a>
</div>