我如何对齐这些？答案

【问题标题】：How do I align these?我如何对齐这些？
【发布时间】：2021-07-31 03:55:06
【问题描述】：

我正在尝试将材质图标与文本对齐，但它不起作用。这是我使用的 html：

<!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>

如果有人可以提供帮助，将不胜感激。谢谢！

【问题讨论】：

标签： html css google-material-icons

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style></style>
</head>
<body>
....

</body>
</html>

使用这种格式，而不是多次使用 body 和 style 标签。

【讨论】：

【解决方案2】：

首先，您的 HTML 和 CSS 的格式非常糟糕。尝试改进它。而且你只能在<ul>或<ol>标签中使用<li>。

所以你的代码应该是这样的

<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>

它将对齐图标和文本属性。

【讨论】：

【解决方案3】：

试试这个：

    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>

【讨论】：