我正在尝试创建联系人字段,但图标和文本必须在一行中。这是现在的样子:
.code-block {
display: inline-grid;
background-color: #232323;
border-radius: 5px;
padding: 5px;
margin-bottom: 7px;
}
.code-block code {
color: #008a00;
}
.code-block .icons {
display: inline-block;
vertical-align: top;
width: 14px;
height: 14px
}
<div class="code-block">
<code>Discord: ...#6177</code>
<img class="icons" src="https://via.placeholder.com/40" alt="Discord" width="10" height="10">
</div>
那么,我怎样才能把它写成一行呢?
最佳答案
我相信您想要的是将以下规则更新为 .code-block
:
grid-template-columns: max-content max-content;
align-items: center;
grid-gap: 4px;
所以所有的规则都是这样的:
.code-block {
display: inline-grid;
grid-template-columns: max-content max-content;
align-items: center;
grid-gap: 4px;
background-color: #232323;
border-radius: 5px;
padding: 5px;
margin-bottom: 7px;
}
.code-block code {
color: #008a00;
}
.code-block .icons {
display: inline-block;
vertical-align: top;
width: 14px;
height: 14px
}
<div class="code-block">
<code>Discord: ...#6177</code>
<img class="icons" src="https://via.placeholder.com/40" alt="Discord" width="10" height="10">
</div>
关于html - 如何使用内联网格将图标和文本排成一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69198646/