Блог

Главная - Вопросы по программированию - Как сделать значки и текст в одной строке с помощью встроенной сетки?

Как сделать значки и текст в одной строке с помощью встроенной сетки?

#html #css #vue.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>

Итак, как я могу сделать это в одной строке?

Комментарии:

1. Чтобы использовать сетку, вам также необходимо определить столбцы. Видишь css-tricks.com/snippets/css/complete-guide-grid .

Ответ №1:

Я полагаю, что вы хотите обновить свой 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>
Метки: