如何使图标和文本在一行与内联网格?

2022-01-29 09:43:03 标签 htmlcssvue.js

我试图创建联系领域,但图标和文本必须在一行。现在看起来是这样的:

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

我怎么才能在一行里写出来呢?

###我相信你想要的是更新你的scss以下规则.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>

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码