#html #css #icons
#HTML #css #Значки
Вопрос:
<div class="icons">
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
<a href="#">
<img class="github" src="GitHub-Mark-64px.png" alt="github logo">
</a>
</div>
Представьте мои значки и как они выглядят сейчас —
Что касается CSS, я пытался использовать justify content с пробелом вокруг, но он распределяет их далеко друг от друга. Я также пытался поиграть с заполнением и полями, и, похоже, это ничего не делает. У меня неправильно настроен HTML или я делаю что-то не так с css?
Комментарии:
1. Мы не сможем вам помочь, если вы не покажете код.
2. Я только что добавил его.
3. Один из самых простых способов — добавить
margin
для<a>
элементов, которые у вас есть в CSS. Но эти элементы являютсяinline
элементами, поэтому вам нужно сделать их нестрочными, сделав их блочными, встроенными блоками, встроенной таблицей и т.д. например:display: inline-block
. Проверьте это для получения подробной информации developer.mozilla.org/en-US/docs/Web/CSS/margin .
Ответ №1:
Поля работают довольно хорошо.
/* You can use this */
a:not(:last-of-type) {
margin-right: 10px;
}
/* Or this */
a:not(:last-of-type) img {
margin-right: 10px;
}
<div class="icons">
<a href="#">
<img src="//via.placeholder.com/64">
</a>
<a href="#">
<img src="//via.placeholder.com/64">
</a>
<a href="#">
<img src="//via.placeholder.com/64">
</a>
</div>
Также есть много других способов сделать это, поэтому, если это не работает в вашей среде, это проблема с этим, и это не может быть отлажено здесь.
Комментарии:
1. В моем css у меня были только .icons, поэтому я добавил .github, а затем margin работал просто отлично. Спасибо.
2. 1 для использования
a:not(:last-of-type)
Ответ №2:
Добавить margin-right
ко всему github
классу. Но не нужно поле-правое github
изображение в последнем <a>
«. это принимается
a:last-child .github{
margin-right:0px;
}
.github{
width:50px;
height:50px;
margin-right:10px;
}
.icons{
margin:20px auto;
text-align:center;
}
a:last-child .github{
margin-right:0px;
}
.github{
width:50px;
height:50px;
margin-right:10px;
}
<div class="icons">
<a href="#"><img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" /></a>
<a href="#"><img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" /></a>
<a href="#"><img class="github" src="https://i.stack.imgur.com/x0ard.png" alt="github logo" /></a>
</div>