我如何對齊這些？
[英]How do I align these?
問題描述
我試圖將材料圖標與文本對齊，但它不起作用。 這是我正在使用的 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>
如果有人可以提供幫助，將不勝感激。 謝謝！
3 個解決方案
解決方案1
0 2021-05-09 15:13:15
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style></style>
</head>
<body>
....
</body>
</html>
使用這種格式而不是多次使用 body 和 style 標簽。
解決方案2
0 2021-05-09 17:12:26
首先，您的 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
0 2021-05-10 08:29:56
嘗試這個：
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>
如何對齊表格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.